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

Question

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

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

}

但它不起作用。

见http://jsfiddle.net/aKybp/4/。

由于它是基于bootstrap构建的，你需要向左展开HTML的结果才能看到div

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

Answer 1

你的中间栏位于另一个没有扩散到全高的容器内。 以下设置修复了该问题（同时.middle-col元素与其父元素合并）。

jsFiddle Demo

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

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

Answer 2

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

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

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