Bootstrap垂直对齐

Question

我的bootstrap应用程序中有一堆图像。

我试图将它们垂直对齐，如下所示：

这就是我目前所拥有的：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/

说明：

Bootstrap使用float进行布局。哪种IMO是一种非常糟糕的做事方式，因为它不是用于定位容器，而是允许文本环绕图像或容器。

在使用float时，元素实际上不再“占用空间”。因此，我们需要删除它。

此外，为了使兄弟元素垂直对齐，它们必须是inline个元素。在这种情况下，inline-block是理想的使用属性。

inline元素具有自然的空格。所以解决方法是取出字体和行高。

Answer 2

请参阅http://jsfiddle.net/9v97xsp9/1/

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

表示容器div。