2017-07-28 11 views
0

CSSを使用してブートストラップを使用して最初の行を左揃えにし、2行目を最初の行のテキスト長に合わせます。ブートストラップCSS他のdivのテキスト長でテキストを中央に揃えます

私はいろいろ試しましたが、できませんでした。 enter image description here

コードは次のよう

   <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> 
+0

あなたが達成し、あなたが使用するコードしようとしているものを提供する必要があります。 – RichGoldMD

+0

いくつかコード... –

+0

気にしてくれてありがとう、私の質問が更新されました。レビューしてください。 –

答えて

0

これを確認してください。..

<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>

+0

ありがとう、私は私の問題を解決した –

0

何かに従ってください? あなたの仕事はわかりませんが、いくつかのタグを削除しました。

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

0

あなたのdivにクラスtext-centerを追加してみてください。

ここには、作業penがあります。

関連する問題