css - 垂直居中标题标签和标题伪选择器的内容

Question

另一个垂直对齐问题...

鉴于以下情况，

HTML:

<div class="thing">
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempus mauris. Vivamus imperdiet congue iaculis.</h2>
</div>

<div class="thing">
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempus mauris.</h2>
</div>

CSS:

.thing{
    background: #eee;
    margin: 0 auto 10px;
    width: 625px
}
h2{
    display: inline-block;
    font-size: 15px;
    line-height: 20px;
    margin: 0 0 0 40px;
    vertical-align: middle;
}
.thing:before{
    background: red;
    content: '';
    display: inline-block;
    height: 40px;
    position: absolute;
    vertical-align: middle;
    width: 40px;
}

为了使文本和红色框垂直居中，我需要做什么？这应该适用于任何高度的标题。

Fiddle

Answer 1

您只需删除破坏行内 block 行为的 position:Absolute。而是使用一些技巧来 fight the space between inline-block elements并确保这两个元素可以放在容器宽度上。试试这个:

.thing{
    font-size:0; /*ADD*/
}
h2{
    /*margin: 0 0 0 40px; REMOVE*/
    width:585px; /*ADD*/
}
.thing:before{
    /*position: absolute; REMOVE*/
}

检查这个 Demo Fiddle