Html 垂直对齐不适用于内联块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35529582/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical align not working on inline-block
提问by frosty
I was told that:
有人告诉我：
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.
垂直对齐仅适用于内联、内联块、图像和表格元素。
与 text-align 不同，它必须应用于子元素，与父元素相反。
However, when I tried to set vertical align middle on an inline-block element, it didn't work. Why?
但是，当我尝试在内联块元素上设置垂直对齐中间时，它不起作用。为什么？
#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>回答by Oriol
It doesn't work because vertical-alignsets the alignment of inline-level contents with respect to their line box, not their containing block:
它不起作用，因为vertical-align设置内联级内容相对于它们的行框对齐，而不是它们的包含块：
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
此属性影响行内元素生成的框在行框内的垂直定位。
A line boxis
一个线框是
The rectangular area that contains the boxes that form a line
包含形成一条线的框的矩形区域
When you see some text which has multiple lines, each one is a line box. For example, if you have
当您看到一些具有多行的文本时，每一行都是一个行框。例如，如果你有
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>
If there is only a single line, like in your case, it's also a line box
如果只有一行，就像你的情况一样，它也是一个行框
Using vertical-align: middlecenters .contentvertically inside that line box. But the problem is that the line box is not vertically centered inside the containing block.
在该行框内垂直使用vertical-align: middle中心.content。但问题是行框没有在包含块内垂直居中。
If you want to center something vertically at the middle of the containing block see How to align text vertically center in div with CSS?
如果您想将某些内容垂直居中在包含块的中间，请参阅如何使用 CSS 在 div 中垂直居中对齐文本？
回答by Yukulélé
Vertical-alignon inline / inline-block element, images, text... align element together, not with parent.
Vertical-align内联/内联块元素、图像、文本...将元素对齐在一起，而不是与父元素对齐。
Usage example: align smiley image in a text
使用示例：对齐文本中的笑脸图像
you can cheat by adding a 0px width, 100% height pseudo-element
你可以通过添加一个 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>回答by fede
It work for me by using vertical-align:text-top;
它通过使用 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;
}
