Question

    .pseudo{
        width:100%;
        height:100px;
        border:1px solid blue;
        text-align:center;

    }
    .pseudo:before{
        content:"";
        display:inline-block;
        vertical-align:middle;
        height:100%;
    }
    .pseudo p{
        display:inline-block;
    }

<div class="pseudo">
    <p>hello</p>
</div>

这是我的html＆amp; css代码。我的问题是为什么我必须使用伪元素vertical-align：middle可以工作。如果像这样写

，它不起作用（vertical-align：middle）

.pseudo{
    width:100%;
    height:100px;
    border:1px solid blue;
    text-align:center;
    display:inline-block;
    vertical-align:middle;

}

Answer 1

vertical-align属性适用于文本行的元素（除非您将其应用于display:table-cell的内容），因此center，top和{ {1}}是根据文本行的高度（所谓的line box）计算的。此行框的高度基本上是根据构成此行的内联元素（文本，图像，内联块等）的高度以及它们相对于彼此的位置（受某些bottom值的影响来计算的）。

如果没有伪元素，行框的高度由文本本身的高度决定，因此文本适合整个行框，因此its vertical midpoint已经与行框垂直中点对齐，所以应用vertical-align不会改变任何内容。但是具有100％容器高度的内联块使得线框（至少）与此内联块一样高（这意味着线框变得与容器一样高）。将文本的垂直中点与此高线框的垂直中点对齐也会使文本在容器中以视觉为中心。

Answer 2

如果您不知道伪类是如何工作的，那么您应该这样做：

伪的定义是：“不是真的;假的。” （tku Google）
转到MDN（Mozilla开发者网络）并阅读有关伪类的内容。

MDN的摘录如下：

CSS伪类是添加到选择器的关键字，用于指定要选择的元素的特殊状态。例如：当用户将鼠标悬停在选择器指定的元素上时，hover将应用样式。

基本上，你可以上课.foo。现在让我们假设您想要将鼠标悬停在它上面。你可以使用Javascript，并且添加一个包含你想要用于悬停的样式的类（使用事件监听器），但这是不必要和浪费的。相反，你添加一个pseudo（记住：“not genuine; sham”）类。所以它是一个类，但它不是一个真正的类。伪类在选择器之后和伪类之前定义为:。例如：

span:hover
.my-class:first-child
#id-4-me:not(#id-not-4-me)

等

还有伪元素。它们定义为::。您可以阅读here。

将来，请在询问之前研究您的问题，与asking

为什么css使用inline-block必须添加伪元素（让vertical-align：middle work）

2 个答案: