有人告诉我：
垂直对齐仅适用于内联，内联块，图像和表格元素。 与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
