html - 对齐 div 内容垂直中心不起作用

Question

我阅读了许多关于 div 中内容垂直对齐的答案，并尝试实现我看到的主要答案：

.middle-col{
   vertical-align: middle; 
   display: table-cell;

}

但它不起作用。

请参阅http://jsfiddle.net/aKybp/4/。

由于它是基于引导程序构建的，因此您需要将 HTML 的结果向左展开以查看 div

我想要实现的是 - 将中间列的内容垂直居中对齐

Answer 1

您的中间列位于另一个未展开到全高的容器内。以下设置修复了该问题（该.middle-col元素也与其父元素合并）。

jsFiddle 演示

.middle-col {
    vertical-align: middle;
}
.row > .col-md-6, .row > .col-md-3 {
    display: table-cell;
    float: none;
}

• PS - 我在这里使用的选择器非常通用，建议您使用 ID 或类似的东西使它们更具体。

Answer 2

您的 div 容器实际上“正在”垂直对齐文本。您的问题是， div 容器的高度不大于它包装的文本内容。

要实现文本相对于图像的垂直居中，您需要将 div-container 的高度设置为例如 480px（图像的高度）。

.middle-col {
    vertical-align: middle; 
    display: table-cell;
    height: 480px;
}