我有一个包含文本的div元素,我想将此div的内容垂直居中对齐.
这是我的div风格:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}<div id="box">
Lorem ipsum dolor sit
</div>做这个的最好方式是什么？
我被告知:
垂直对齐仅适用于内联,内联块,图像和表格元素.
与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>