垂直对齐不适用于内联块

Question

有人告诉我：

Vertical align only works for inline,inline-blocks,images,and table elements.
It has to be applied on the child element, as oppose to the parent element, unlike 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 在内联/内联块元素、图像、文本...上将元素对齐在一起，而不是与父元素对齐。

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

你可以通过添加一个宽度为 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>

Answer 2

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

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

一个line box是

The rectangular area that contains the boxes that form a line

当你看到一些文本有多行时，每一行都是一个行框。例如，如果您有

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。但问题是行框在包含块内没有垂直居中。

如果您想在包含块的中间垂直居中，请参阅 How to align text vertically center in div with CSS?

Answer 3

我使用 vertical-align:text-top;

<div class="box">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div>
<div class="box">
    Lorem ipsum dolor sit amet, diam nonummy nibh 
</div>
<div class="box">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div>

.box {
   display: inline-block;
   width: 20%;
   margin: 5px;
   padding:10px;
   border-top: 5px solid #000000;
   vertical-align: text-top;
}

jsfiddle

垂直对齐不适用于内联块

Vertical align not working on inline-block

html

css

inline

vertical-alignment