自举垂直对齐

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

。