Bootstrap垂直對齊圖像

Question

本網站上：http://www.livenews.surf/我想讓新聞圖像和文字垂直居中對齊，我該怎麼做？

Answer 1

最簡單的解決方案是使用Flexbox（有關它的用法的更多詳細信息，請參閱規格）。

對於這種特殊的情況下，指定自定義類，每片含格（目前它只有.col-md-11）您的內容，例如類「內容」，這代碼添加到您的樣式

.content { 
    display: flex; 
    align-items: center; 
    flex-wrap: wrap; 
} 

小碼解釋：align-items垂直對齊項目，因爲我們離開了默認的flex方向，這是行，並且flex-wrap將允許我們的父容器將孩子包裝到下一行（默認爲nowrap）。

請記住，即爲了解答此問題，我沒有包含供應商前綴，但我強烈建議您使用Autoprefixer等工具。

Answer 2

那麼，當你正在使用的自舉列，所以你需要通過以下幾個步驟，使下面的解釋：

爲網頁的一般情況下的HTML結構如下：

<div class="col-md-11"> 
    <div class="col-md-5"> 
     <a href="#"> 
      <img src="images/image.jgp"> 
     </a> 
    </div> 
    <div class="col-md-7"> 
     // text goes here 
    </div> 
</div> 

首先，您需要使兩列（圖片+文字）的高度相同。爲此，您可以使用jQuery matchHeight。 之後，您可以在以下更改的幫助下使圖像垂直居中。

<div class="col-md-5 photo"> 
    <a href="#"> 
     <img src="images/image.jgp"> 
    </a> 
</div> 

.photo { 
    display: table; 
} 
.photo a { 
    vertical-align: middle; 
    display: table-cell; 
} 
.photo img { 
    display: block; 
    height: auto; 
    width: 100%; 
} 

這裏是Plnkr。