为什么不是这种垂直居中技巧工作？

我试图垂直居中在另一个div垂直三个div。我想技术described here on CSS Tricks和demonstrated here：添加一个伪元素：容器之前：为什么不是这种垂直居中技巧工作？

.author-page-box:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; 
}

，并给孩子的div中的垂直对齐：

.aub-img, 
.aub-main, 
.aub-contact-links { 
    display: inline-block; 
    vertical-align: middle; 
}

但我尝试使这项工作不起作用！谁能告诉我我要去哪里？（JSFiddle）。

====================

编辑：

这里是我的布局是什么样子，而不是垂直居中！

enter image description here

来源

2014-01-17 And Finally

我在查找*为什么*时遇到了一些问题，但您之前的元素没有高度。当你为它添加一个边框时，发现很容易：http://jsfiddle.net/aCv9e/10/ – cimmanon

嗯，你说得对cimmanon，很奇怪！当我为它添加一个特定的高度时，一切都以中心为准 –

每当你使用百分比高度时，你必须问自己“究竟是什么的百分比？”在这种情况下，您尝试使用没有设置高度的框的百分比，只有最小高度。这在CSS中不起作用。该箱子必须在容器上有一个明确设定的高度以使用百分比高度 – Alohci

是这样的吗？ Vertically Centered Example

你有正确的想法，但被添加

vertical-align: middle;

到错误的div。

来源

2014-01-17 17:36:41 CJdriver

感谢CJdriver，这似乎是答案！ –

为什么不是这种垂直居中技巧工作？

回答

相关问题