垂直对齐不工作在内联块

本文介绍了垂直对齐不工作在内联块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我被告知：然而，当我试图设置垂直对齐中间在一个inline-block元素，它没有工作。为什么？ #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'>内容< / div>< / div> 方案它无效，因为 如果只有一行，就像你的情况一样，它也是一个行框 使用 vertical-align ：middle 中心 .content 。但是问题是，行框不是在包含块内垂直居中。 如果要在包含块的中间垂直居中，请参阅如何将文本垂直居中在div中与CSS对齐？ I was told that: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> 解决方案 It doesn't work because vertical-align sets the alignment of inline-level contents with respect to their line box, not their containing block:A line box isWhen you see some text which has multiple lines, each one is a line box. For example, if you havep { 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 boxUsing vertical-align: middle centers .content vertically inside that line box. But the problem is that the line box is not vertically centered inside the containing block.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? 这篇关于垂直对齐不工作在内联块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！