垂直对齐不在内联块上工作

Question

我被告知:

垂直对齐仅适用于内联,内联块,图像和表格元素.
与text-align不同,它必须应用于子元素,与父元素相对.

但是,当我尝试在内联块元素上设置垂直对齐中间时,它不起作用.为什么？

#wrapper {
border: 1px solid black;
width: 500px;
height: 500px;
}
#content {
border: 1px solid black;
display: inline-block;
vertical-align: middle;
}

<div id = 'wrapper'>
<div id = 'content'> content </div>
</div>

Answer 1

它不起作用,因为vertical-align设置内联级内容相对于其行框的对齐方式,而不是它们的包含块:

此属性会影响由内联级元素生成的框的线框内的垂直位置.

一个线框是

包含形成一条线的框的矩形区域

当您看到一些包含多行的文本时,每一行都是一个行框.例如,如果你有

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

如果只有一行,就像你的情况一样,它也是一个行框

在该线框内垂直使用vertical-align: middle中心.content.但问题是线框不是在包含块内垂直居中.

如果要在包含块的中间垂直居中,请参阅如何将div中的文本垂直居中与CSS对齐？

Answer 2

Vertical-align 内联/内联块元素、图像、文本...将元素对齐在一起，而不是与父元素对齐。

使用示例：对齐文本中的笑脸图像

你可以通过添加一个 0px 宽度，100% 高度的伪元素来作弊

#wrapper {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    vertical-align: middle;
}
#wrapper:after{
    content: '';
    display: inline-block;
    width: 0px;
    height: 100%;
    vertical-align: middle;
}
#content {
    border: 1px solid black;
    display: inline-block;
    vertical-align: middle;
}

<div id = 'wrapper'>
    <div id = 'content'> content </div>
</div>