Question

当我删除div.content中的vertical-align：在选择器之前，文本将向下拉并且无法完全显示，那么伪类的作用是什么以及为什么这样做？ PS：有没有其他方法可以像演示节目那样实现，即在中间对齐文本，如果篇幅太长，文本将以新行开头。

这是演示：http://jsfiddle.net/yougen/8WhNZ/

HTML：

<div class="wrapper">
        <div class="content">
            <span>Mix Color Lace Dress</span>
        </div>
</div>

的CSS：

div.wrapper { 位置：相对; 宽度：120像素; }

div.content {
    width: 120px;
    height: 80px;
    text-align: center;
    background: rgba(51,51,51,0.5);
}

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

div.content span {
    display: inline-block;
    width: 80px;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    color: white;
}

Answer 1

before伪元素就在您真实内容的左侧。它的功能是具有100％的容器高度，并且精确地具有垂直对齐：中间以强制同一行（在这种情况下，您的跨度）上的每个元素具有相同的vertical-align：middle以显示在容器的中间，虽然它没有100％的高度。

如果您不知道要在中间对齐的元素的高度，则使用此技巧。在其他情况下，您可以使用垂直边距，例如，但在这里我们需要一个已知高度的伪元素（容器的100％）。

请注意：http://jsfiddle.net/7hUqs/

#element-1 {
    height: 50px;
    background-color: blue;
    vertical-align: middle;
}
#element-2 {
    height: 100px;
    background-color: yellow;
    vertical-align: top;
}
#element-3 {
    height: 70px;
    background-color: green;
    vertical-align: middle;
}
#element-4 {
    height: 80px;
    background-color: pink;
    vertical-align: middle;
}

vertical-align：middle与具有相同垂直对齐的淤积元素一起工作。所有这些作为一个块，将与该线的其他元素及其垂直对齐（在本例中为顶部）对齐。并且线的高度是其元素的最大高度，而不是容器的高度。有点奇怪，但这就是事情。

Answer 2

试试这个

div.content:before {
    content:'';
    display: inline;
    height: 100%;
    margin-top:10px;
    margin-right: -0.25em;
}
div.content span {
    display: inline;
    width: 80px;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    color: white;
}

fiddle demo

伪类垂直对齐

2 个答案: