文本节点的垂直居中对齐：middle

Question

我想要垂直对齐文本块。我有一个:before伪元素，我想实现的是两者都垂直居中对齐。是否可以在没有额外包装器的情况下实现？以下是我的问题示例：

HTML：

<div class="fail">Something's wrong</div>
<div class="success">
    <span>Perfect middle</span>
</div>

CSS失败:

.fail
{
    background: orange;
    font-size: 30px;
    display: inline-block;
}

.fail:before
{
    background: red;
    content: '✗';
    text-align: center;
    display: inline-block;
    line-height: 60px;
    margin-right: 10px;
    vertical-align: middle;
    width: 60px;
}

CSS 成功：

.success
{
    font-size: 30px;
    background: lime;
    display: inline-block;
}

.success:before
{
    background: green;
    content: '✓';
    text-align: center;
    display: inline-block;
    line-height: 60px;
    margin-right: 10px;
    vertical-align: middle;
    width: 60px;
}

.success span {
    vertical-align: middle;
}

这张图片可能不太明显，但左边的那个太高了，差大约2-3像素。这对于更小的元素尤其重要。因此，我的问题是：我能否只用一个HTML标签和:before达到完美居中的效果？

- Robo Robok

---

在第二个 div 中做你所做的事。 - Amit singh

但它会添加无意义的垃圾标签 :( - Robo Robok

@RoboRobok，我不明白为什么在你的情况下它被称为垃圾标签。没有理解你的代码，但是对于元素来说，拥有一个容器/包装标签也很重要，以满足我们的需求。 - Wesley Brian Lachenal

尝试从.fail:before中删除vertical-align:middle;。 - nelek

还有从success:before中移除，并且删除span。我认为这会起作用。 - nelek

这个例子是否更好？它将行高应用于 div 本身。 - misterManSam

Answer 1

因为我不太喜欢内联元素，所以我会这样做：

.fail {
    position: relative;
    float:left;
    padding-right: 10px;
    line-height: 60px;
    font-size: 30px;
    background: orange;

}

.fail:before {
    content: '✗';
    display: inline-block;
    width: 60px;
    margin-right: 10px;
    text-align: center;
    background: red;
}

- Alex

---

这样，您将需要为浮动元素包装器或清除它。float属性被过度使用并且大多数情况下使用不当。按钮是内联的，没有什么可喜欢的。 - Robo Robok

@RoboRobok - 已经有很多问题涵盖了适合您的解决方案。这个例子看起来很好用（只要您只需要一个垂直居中的行），并且没有理由将浮动引入其中 :) 只需将行高应用于父div即可。 - misterManSam