Bootstrap css通过其他div的文本长度将文本与中心对齐

问题描述：

我想使用css，bootstrap将第一行对齐左对齐，第二行将居中第一行的文本长度。Bootstrap css通过其他div的文本长度将文本与中心对齐

我尝试了很多方法，但没有尝试。

代码遵循

   <div class="col-md-6"> 
       <a href="/" style="text-decoration:none"> 
        <div class="col-md-12 row-eq-height" style="padding:0;"> 
         <div class="col-md-2" style="padding:0"> 
          <img src="/Content/images/logo.png" class="img-responsive" alt=""> 
         </div> 
         <div class="col-md-10 tex-center" style="padding-right:0;"> 
          <div style="padding:0"> 
           <div class="line1-bold">THIS IS THE FIRST LONG HEADLINE</div> 
           <div class="line2">THIS IS THE SECOND HEADLINE</div> 
          </div> 
         </div> 
        </div> 
       </a> 
      </div>

您需要提供您要完成什么，你使用的代码。 – RichGoldMD

部分代码请... –

感谢您的关心，我更新了我的问题，请查看并帮助我解决它， –

答

请检查这个..

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    
 

 

 
<div class="col-md-6"> 
 
       <a href="/" style="text-decoration:none"> 
 
        <div class="col-md-12 row-eq-height" style="padding:0;"> 
 
         <div class="col-xs-2" style="padding:0"> 
 
          <img src="https://www.tenforums.com/attachments/browsers-email/18558d1485951187t-microsoft-edge-logo-microsoft-edge-100582336-large.png" class="img-responsive" style="width:100px" alt=""> 
 
         </div> 
 
         <div class="" style="float:left;"> 
 
         <div class="line1-bold" style="color:#b63957; font-size:18px;">THIS IS THE FIRST LONG HEADLINE</div> 
 
           <div class="line2" style="color:#b63957; font-size:16px; text-align:center;">THIS IS THE SECOND HEADLINE</div> 
 
         
 
         </div> 
 
         
 
         
 
        </div> 
 
       </a> 
 
      </div>

谢谢，我解决了我的问题 –

答

像这样的事情？我不知道你的任务，但我删除了一些标签。

CSS

.img-responsive { 
    width: 100px; 
    float: left; 
} 
span { 
    display: block; 
}

HTML

<div class="col-md-6"> 
       <a href="/" style="text-decoration:none"> 
        <div class="col-md-12 row-eq-height" style="padding:0;"> 
          <img src="https://www.tenforums.com/attachments/browsers-email/18558d1485951187t-microsoft-edge-logo-microsoft-edge-100582336-large.png" class="img-responsive" alt=""> 
<span class="text-left">THIS IS THE FIRST LONG HEADLINE</span> 
<span class="text-center">THIS IS THE SECOND HEADLINE</span> 
        </div> 
       </a> 
      </div>

Reference Link

答

尝试添加类text-center到您的div。

这是一个工作pen。

Bootstrap css通过其他div的文本长度将文本与中心对齐

相关推荐