为什么需要超过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（如我上面所做的那样），要么在家长中添加一些文本。

我想知道为什么我们需要添加多个元素才能使这些元素垂直对齐？这是如何运作的？

来源

2016-05-17 ipkiss

没有明白你的观点。那么，如果你仍然会在子div将居中的情况下移除它。 –

一旦删除：before元素，它就会居中。 – Paran0a

我发现问题是我没有在HTML文件的开头添加<！DOCTYPE html>。如果我将DOCTYPE添加为<！DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.01 Transitional // EN”“http://www.w3.org/TR/html4/loose.dtd，则代码无效“>。自CSS 1.0以来，不支持行高属性 – ipkiss

有一种常见的误解，认为vertical-align是指内联级别元素在父级内的位置。

事实并非如此。

vertical-align指多个内联级元素的彼此这样的集装箱中的对准。

从W3 Spec

的行内盒被垂直根据它们的“垂直对准”属性对齐。如果它们对齐“顶部”或“底部”，则必须对齐它们以尽量减少线框高度。

来源

2016-05-17 09:31:36

为什么需要超过2个元素使用行高属性垂直对齐？

回答

相关问题