html - 垂直居中与 :after 伪元素不起作用

Question

我正在尝试使用伪元素方法（如本文末尾所述）将我的introWrap容器垂直居中。我一直应用这种方法没有任何问题，但我的生活似乎无法理解为什么它在这种情况下不起作用（http://jsfiddle.net/4yfru/2/）。:after

现在introWrapdiv 位于顶部，而它实际上应该位于垂直轴的中心。我尝试用:aftera 替换伪元素span，并且效果很好。这里发生了一些可疑的事情，我不知道是什么。

任何善良的灵魂可以在这里帮助我吗？

Answer 1

您应用的元素有误:after。您需要将其应用于“包装”元素，如下所示：

#intro:after{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}