使用Bootstrap網格在響應圖像旁邊豎直對齊元素

Question

我有兩列的引導網格，一個col有一個響應圖像，第二個有一個標題和一些其他元素。我希望第二列的內容始終與圖像垂直對齊。這裏的測試案例：

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

Answer 1

試試這個代碼

.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