2017-01-09 34 views
0

2つの列のブートストラップグリッドがあります.1つの列には応答イメージがあり、2つ目には見出しがあり、その他の要素があります。私は2番目の列の内容を常に画像に垂直に整列させたいと思います。ここでは、テストケースがあります:ブートストラップグリッドを使用するレスポンシブイメージの横に垂直に配置する要素

.align-this { 
 
    //?.. 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row"> 
 
      <div class="col-sm-5 col-md-6 col-lg-7"> 
 
       <img class="img-responsive" src="https://dummyimage.com/200x600/000/fff"> 
 
      </div> 
 
      <div class="col-sm-7 col-md-6 col-lg-5"> 
 
       <div class="align-this"> 
 
        <h1 class="main-title">Title</h1> 
 
        <p> 
 
         Description text here. Lorem ipsum or whatever. 
 
        </p> 
 
        <div> 
 
         <a href="#" class="btn btn-default btn-lg">main cta</a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
</div>

答えて

0

このコードを試してみてください

.row{ 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row"> 
 
      <div class="col-sm-5 col-md-6 col-lg-7"> 
 
       <img class="img-responsive" src="https://dummyimage.com/200x600/000/fff"> 
 
      </div> 
 
      <div class="col-sm-7 col-md-6 col-lg-5"> 
 
       <div class="align-this"> 
 
        <h1 class="main-title">Title</h1> 
 
        <p> 
 
         Description text here. Lorem ipsum or whatever. 
 
        </p> 
 
        <div> 
 
         <a href="#" class="btn btn-default btn-lg">main cta</a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
</div>

は、リンクにhttp://codepen.io/santoshkhalse/pen/oBjZyG

+0

感謝を持っています。 'row'クラスに触れるのではなく、修飾子クラスを追加しました。 –

+0

はい!それが良いだろう –

関連する問題