我想要垂直对齐文本块。我有一个
CSS失败:
这张图片可能不太明显,但左边的那个太高了,差大约2-3像素。这对于更小的元素尤其重要。因此,我的问题是:我能否只用一个HTML标签和:before达到完美居中的效果?
: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达到完美居中的效果?
.fail:before
中删除vertical-align:middle;
。 - neleksuccess:before
中移除,并且删除span
。我认为这会起作用。 - nelek