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

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

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

}

但这是行不通的。

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

由于它是基于引导程序构建的，因此您需要向左扩展HTML的结果才能看到div

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

最佳答案

您的中间列在另一个容器中，该容器没有展开到整个高度。
以下设置可解决此问题（.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或类似名称使选择器更具体。

关于html - 对齐div内容垂直居中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18945062/