vertical-align和pseudo元素

Question

要垂直居中<a>代码，我在此answer

中找到了此解决方案

  

您可以使用完整显示为内联框的伪元素   li的高度和垂直对齐到midlle。的 DEMO

body, html {
    height:100%;/ needed for demo */
}
nav {
    height: 50%;/* increased for demo */
    width: 100%;
}
nav ul {
    height: 100%;
    margin: 0px;
}
nav ul li {
    height: 33%;
    box-shadow:inset 0 0 0 1px;/* show me li , for demo */
}
nav ul li:before {
    content:'';
    height:100%;
    display:inline-block;
    vertical-align: middle;
}

我的问题为什么我们必须使用伪元素？
当我删除伪元素时，为什么它不起作用，我只是：

a {
    height:100%;
    display:inline-block;
    vertical-align: middle;
}

vertical-align是否必须应用于第一个元素（:before）而另一个（<a>）是否会遵循垂直对齐方式？

Answer 1

为什么伪工作？

使用before和after伪元素，我们可以在元素的内容之前或之后插入虚拟元素。它们都以相同的方式工作，除了一个在元素之前插入内容而另一个在之后插入内容。

伪元素强制在html页面中存在一些内容，在css样式表中，您应用高度为100％的空内容，即。使用您的标签高度，现在内容占据了之前或之后的空间（当您使用伪时），并且垂直对齐顶部，中间或底部选项：

try this fiddle：只需设置height: 100px;，然后手动增加，如200px，300px，那么你就会明白确切原因

如果没有垂直对齐，它会向下移动，因为它是100％高度，如果你使用vertical-align:middle，那么你会注意到伪是如何工作的。

你可以通过看到这张照片来理解：

Answer 2

<强>更新

使用pseudo元素，由于您在height:100%;上使用pseudo element.时已知高度，因此您将在文本中垂直居中。一旦删除高度，布局就会被破坏。

标记为inline element，因此您将其设为block level元素。但vertical-align: middle;仅适用于display:table-cell。但是等着你必须在display:table元素中使用li。

检查 DEMO 。所以这段代码可以工作..

a{
   height:100%;
   display: table-cell; /*replaced with display:inline-block*/
   vertical-align: middle;
}

nav ul li {
    height: 33%;
    box-shadow:inset 0 0 0 1px;
    display:table; /*add this line*/
    width:100%; /*add width as well*/
}