中间对齐问题
我对 vertical-align:middle; 工作方式的误解是什么？
我已经发布了（http://jsfiddle.net/D6RwZ/）一些我希望垂直对齐的代码蓝色矩形中的红色矩形，但看起来不是那样的。
What is my misunderstanding about the way that vertical-align:middle; works?
I have posted (http://jsfiddle.net/D6RwZ/) some code which I would expect to vertically align a red rectangle in a blue rectangle, but it doesn't look like that.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
Vertical-align:middle 不适用于 div（块元素）。您可以参考此处了解详细信息。
如果你想垂直对齐，我认为唯一的选择是使用带有适当参数的边距/填充。
vertical-align:middle won't work on div (block element). You can refer here for details.
If you want to vertical align, I think the only option is using margin/padding with appropriate parameters.
垂直对齐仅适用于内嵌图像并显示：表格单元格。
我已经使用这个解决方案几次了，效果很好很好，但需要一些工作。如果您使用固定大小的元素，绝对位置是迄今为止最简单的。动态大小的元素和垂直居中可能非常棘手，需要处理很多浏览器的怪癖。
Vertical-align only works on inline images and display: table-cell.
I've used this solution a few times and it works quite well but takes some work. If you're working with fixed size elements position absolute is by far the simplest. Dynamic sized elements and vertical centering can be very tricky, lots of browser quirks to deal with.
vertical-align只能应用于具有：display:table-cell的元素，以便垂直对齐元素的内容。display:inline或display:inline-block以便在包含该元素的文本行中垂直对齐该元素后者的廉价破解：http://jsfiddle.net/8bZQS/
vertical-aligncan only be applied to elements with:display:table-cellin order to vertically align the contents of the element.display:inlineordisplay:inline-blockin order to vertically align the element within the text line that contains itA cheap hack with the latter : http://jsfiddle.net/8bZQS/