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

德耶尔

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

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

}

但这是行不通的。

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

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

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

伊泰

您的中间列在另一个容器中,该容器没有展开到最大高度。以下设置修复了该问题(该.middle-col元素已与其父级合并)。

jsFiddle演示

.middle-col {
    vertical-align: middle;
}
.row > .col-md-6, .row > .col-md-3 {
    display: table-cell;
    float: none;
}
  • PS-我在这里使用的选择器确实很通用,建议您使用ID或类似名称使选择器更具体。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章