自舉垂直對齊

Question

我在自舉應用程序中有一堆圖像。

我試圖讓他們垂直對齊的，就像這樣：

這是我目前有：http://jsfiddle.net/9v97xsp9/

和HTML：

<div class="row"> 
    <div class="col-md-2"> 
     <img src="http://lorempixel.com/400/300/" alt="" /> 
    </div> 
    <div class="col-md-2"> 
     <img src="http://lorempixel.com/200/400/" alt="" /> 
    </div> 
    <div class="col-md-2"> 
     <img src="http://lorempixel.com/500/250/" alt="" /> 
    </div> 
    <div class="col-md-2"> 
     <img src="http://lorempixel.com/250/400/" alt="" /> 
    </div> 
</div> 

哪有我完成了這個？

Answer 1

爲您的行添加類.imageRow，以便您不會影響其他col-md-2類。

<div class="row imageRow"> 
    <div class="col-md-2"> 
     <img src="http://lorempixel.com/400/300/" alt="" /> 
    </div> 
    <div class="col-md-2"> 
     <img src="http://lorempixel.com/200/400/" alt="" /> 
    </div> 
    <div class="col-md-2"> 
     <img src="http://lorempixel.com/500/250/" alt="" /> 
    </div> 
    <div class="col-md-2"> 
     <img src="http://lorempixel.com/250/400/" alt="" /> 
    </div> 
</div> 

然後使用以下CSS：

.imageRow { 
    font-size: 0px; 
    line-height: 0px; 
} 
.imageRow .col-md-2 { 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
} 
@media (min-width: 992px) { 
    .imageRow .col-md-2 { 
     display: inline-block; 
    } 
} 

https://jsfiddle.net/9v97xsp9/2/

說明：

引導使用float他們的佈局。哪個國際海事組織是一個非常糟糕的做事方式，因爲它不是用於定位容器，而是允許圍繞圖像或容器進行文本包裝。

在使用float時，元素實際上不再「佔據空間」。因此，我們需要刪除它。

此外，爲了讓兄弟元素垂直對齊它們自己，它們需要是inline元素。在這種情況下，inline-block是理想的使用屬性。

inline元素具有自然空白。所以解決方法是取出字體和行高。

Answer 2

爲div容器見http://jsfiddle.net/9v97xsp9/1/

.va{ 
    display: table-cell; 
    vertical-align: middle; 
} 

。