垂直对齐不适用于嵌入式块
有人告诉我：
垂直对齐仅适用于内联，内联块，图像和表格元素。 与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>
问题答案：
这是行不通的，因为它vertical- align设置了行内内容相对于其行框而不是其包含块的对齐方式：
此属性影响由inline-level元素生成的框的线框内的垂直位置。
一个线框内为
包含形成直线的框的矩形区域
当您看到包含多行的某些文本时，每个文本都是一个行框。对于
例如，如果您有
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中使用至关重要。 我正在尝试遵循，如果您从所有div中删除浮点数，那么它将正常工作： CSS： JSFiddle 问题答案： 您需要设置行高。
-
垂直对齐 1. grid-template-areas 属性值保持换行，并使用空格保持每列垂直对齐。 例如： .foo { grid-template-areas: "header header" "nav main" "footer ...."; } 2. grid、grid-template
-
问题内容： HTML CSS 问题 文本应放在我的“表格单元”的中间。一切正常，直到我添加“ position：absolute”。现在它不能再将我的内容放在中间了吗？为什么不？它仍然知道我的身高和宽度，因为我在CSS中进行了设置。 有什么聪明的解决方法吗？ 问题答案： 一切正常，直到我添加“ position：absolute”。现在它不能再将我的内容放在中间了吗？为什么不？ 部队，在这里阅读第
-
问题内容： 我在浮动div中有一个img，但我不知道如何垂直居中。 垂直对齐：当然中间不起作用。 问题答案： 要在父元素中垂直对齐文本，并谨记的是一个内联元素等行为 类似 文本，你可以简单地设置到父元素： 。
-
在CSS中，行框的高度总是足以容纳它包含的所有行内级框，当一个行内级框 B 的高度小于包含它的行框高度时，则由 vertical-align属性 来决定B在行框中垂直对齐的位置。因此，vertical-align属性只对行内级元素有效，对块级元素无效。并且，该属性不能被子元素继承。 在垂直对齐时，行内非替换元素的行内级框是由 line-height 的高度定义的框，即在内容区的上下各添加半行距后的
-
问题内容： 我有一个包含图像和ap标签的div（如下所示）。我想根据段落的多少行在div的中间垂直对齐图像。垂直对齐不起作用。我现在正在使用JavaScript找出要添加到margin- top的数量，但是宁愿使用CSS。有任何想法吗？ 问题答案： 尝试将元素的属性设置为图像的高度，例如： 编辑： 刚意识到我读错了问题，却错过了多行的事实。尝试的一种选择是完全删除元素，并将其设置为of的，使用的o