Warum müssen mehr als 2 Elemente mithilfe der Zeilenhöheneigenschaft vertikal ausgerichtet werden?

Question

Ich musste ein Inline-Block-Element vertikal ausrichten und stieß im Internet auf eine Line-Height-Eigenschaft.

Der Code wie folgt:

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>

Wenn jedoch die parent (#line-parent) nur das Kind (.line-child) enthält, dann wird das Kind nicht vertikal ausgerichtet in der Mitte.

Um das Kind im Elternteil vertikal auszurichten, habe ich entweder spudo Klasse :before im Elternteil hinzugefügt (wie ich oben getan habe) oder einen Text im Elternteil hinzugefügt.

Ich möchte wissen, warum wir mehr als Elemente hinzufügen müssen, um diese Elemente vertikal ausgerichtet zu bekommen? Wie funktioniert das?

Answer 1

Es gibt ein allgemeines Missverständnis, dass sich vertical-align auf die Position eines Inline-Level-Elements innerhalb eines übergeordneten Elements bezieht.

Dies ist nicht der Fall.

vertical-align bezieht sich auf die Ausrichtung von mehreren Inline-Ebene Elemente zueinander innerhalb eines solchen Behälters.

Vom W3 Spec

Die Inline-Ebene Kästen vertikal ausgerichtet sind entsprechend ihrer 'vertical-align' Eigenschaft. Wenn sie "oben" oder "unten" ausgerichtet sind, müssen sie so ausgerichtet sein, dass die Höhe der Zeilenhöhe minimiert wird.