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>

來源

2017-07-28 Tran Audi

您需要提供您要完成什麼，你使用的代碼。 – 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>

來源

2017-07-28 05:03:44

謝謝，我解決了我的問題 –

像這樣的事情？我不知道你的任務，但我刪除了一些標籤。

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

來源

2017-07-28 04:57:23

嘗試添加類text-center到您的div。

這是一個工作pen。

來源

2017-07-28 05:02:37

Bootstrap css通過其他div的文本長度將文本與中心對齊

回答

相關問題