为什么需要超过2个元素使用行高属性垂直对齐?
问题描述:
我需要垂直对齐一个内嵌块元素,并在Internet上使用line-height属性发现了一个例子。为什么需要超过2个元素使用行高属性垂直对齐?
的代码如下:
HTML
div#line-parent {
display: block;
width: 100%;
height: 100px;
line-height: 100px;
border: 1px dotted #ccc;
background-color: antiquewhite;
text-align: center;
}
div#line-parent:before {
content: "";
display: inline-block;
vertical-align: middle;
}
div.line-child {
display: inline-block;
width: 20%;
line-height: normal;
background-color: brown;
vertical-align: middle;
}
<div id="line-parent">
<div class="line-child">
vertical align using line height
</div>
</div>
然而,如果父(#line-parent
)只包含子(.line-child
),那么孩子不垂直对齐在中间。
为了让孩子在家长中垂直对齐,我要么在家长中添加speudo类:before
(如我上面所做的那样),要么在家长中添加一些文本。
我想知道为什么我们需要添加多个元素才能使这些元素垂直对齐?这是如何运作的?
答
有一种常见的误解,认为vertical-align
是指内联级别元素在父级内的位置。
事实并非如此。
vertical-align
指多个内联级元素的彼此这样的集装箱中的对准。
的行内盒被垂直根据它们的“垂直对准”属性对齐。如果它们对齐“顶部”或“底部”,则必须对齐它们以尽量减少线框高度。
没有明白你的观点。那么,如果你仍然会在子div将居中的情况下移除它。 –
一旦删除:before元素,它就会居中。 – Paran0a
我发现问题是我没有在HTML文件的开头添加。如果我将DOCTYPE添加为。自CSS 1.0以来,不支持行高属性 – ipkiss