垂直对齐：文本节点居中

Question

我正在尝试垂直对齐文本块。我有一个:before伪元素，我想要实现的是将两者对齐到中间。

\n\n

是否可以在没有额外包装的情况下实现它？我的问题是这样的：

\n\n

\n\n

HTML：

\n\n

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

\n\n

CSS 失败：

\n\n

.fail\n{\n    background: orange;\n    font-size: 30px;\n    display: inline-block;\n}\n\n.fail:before\n{\n    background: red;\n    content: \'\xe2\x9c\x97\';\n    text-align: center;\n    display: inline-block;\n    line-height: 60px;\n    margin-right: 10px;\n    vertical-align: middle;\n    width: 60px;\n}\n

\n\n

CSS 成功：

\n\n

.success\n{\n    font-size: 30px;\n    background: lime;\n    display: inline-block;\n}\n\n.success:before\n{\n    background: green;\n    content: \'\xe2\x9c\x93\';\n    text-align: center;\n    display: inline-block;\n    line-height: 60px;\n    margin-right: 10px;\n    vertical-align: middle;\n    width: 60px;\n}\n\n.success span {\n    vertical-align: middle;\n}\n

\n\n

从这张照片上可能不太明显，但左边那张太高了，大约有2-3个像素的差异。这对于较小的元素尤其重要。

\n\n

所以我的问题是：我可以只用一个 HTML 标签来实现完美的中间 +:before？

\n

Answer 1

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

\n\n

.fail {\n    position: relative;\n    float:left;\n    padding-right: 10px;\n    line-height: 60px;\n    font-size: 30px;\n    background: orange;\n\n}\n\n.fail:before {\n    content: '\xe2\x9c\x97';\n    display: inline-block;\n    width: 60px;\n    margin-right: 10px;\n    text-align: center;\n    background: red;\n}\n

\n