Ausführliche Erläuterung von Beispielen für Zeilenhöhen- und Vertikalausrichtungseigenschaften in CSS

Zeilenhöhe, Schriftgröße und vertikale Ausrichtung sind Schlüsselattribute zum Festlegen des Layouts von Inline-Elementen. Diese drei Eigenschaften sind voneinander abhängig und das Ändern des Abstands zwischen Linien, das Festlegen der vertikalen Ausrichtung usw. erfordern alle ihre Zusammenarbeit. Die Schriftgröße wurde in CSS-Schriftarten ausführlich vorgestellt. In diesem Artikel werden hauptsächlich die Zeilenhöhe und die vertikale Ausrichtung vorgestellt.

Linienhöhe

Definition

Linienhöhe bezieht sich auf den Abstand zwischen den Grundlinien der Textzeilen. Die Zeilenhöhe wirkt sich tatsächlich nur auf Inline-Elemente und andere Inline-Inhalte aus und wirkt sich nicht direkt auf Elemente auf Blockebene aus. Sie können die Zeilenhöhe auch für ein Element auf Blockebene festlegen, dieser Wert gilt jedoch nur für den Inline-Inhalt des Blocks. Nur dann wird es eine Wirkung haben. Durch die Angabe der Zeilenhöhe für ein Element auf Blockebene wird eine minimale Zeilenhöhe für den Inhalt des Elements auf Blockebene festgelegt: | |. inherit

Anfangswert: normal

Gilt für: alle Elemente

Vererbung: Ja

Prozentsatz: relativ zur Schriftgröße der Elementschriftart -size

Terminologie Um die Zeilenhöhe genau zu verstehen, müssen Sie die gängige Terminologie verstehen über den Bau von Leitungskästen.

Für nicht ersetzte Inline-Elemente oder einen Teil anonymen Textes bestimmen Schriftgröße und Schriftfamilie die Höhe des Inhaltsbereichs. Wenn im Fall von Song Dynasty die Schriftgröße eines Inline-Elements 15 Pixel beträgt, beträgt die Höhe des Inhaltsbereichs 15 Pixel. Bei anderen Schriftarten entspricht die Höhe des Inhaltsbereichs nicht der Schriftgröße

Der Inhaltsbereich plus Zeilenabstand entspricht der Inline-Box. Wenn die Schriftgröße eines nicht ersetzten Inline-Elements 15 Pixel und die Zeilenhöhe 21 Pixel beträgt, beträgt der Unterschied 6 Pixel. Der Benutzeragent teilt diese 6 Pixel in zwei Hälften und wendet eine Hälfte oben und unten auf den Inhaltsbereich an, wodurch ein Inline-Feld entsteht.

Wenn die Zeilenhöhe kleiner als ist Wenn die Schriftgröße verwendet wird, ist die Inline-Box tatsächlich kleiner als der Inhaltsbereich

Die Line-Box ist definiert als die höchste Inline-Box in der Zeile. Der Abstand von der Oberkante zur Unterseite der untersten Inline-Box und die Oberkante jeder Zeilenbox liegt neben der Unterseite der vorherigen Zeilenbox

Auffüllung, Ränder und Ränder haben keinen Einfluss auf die Höhe des Zeilenfelds, d. h. sie haben keinen Einfluss auf die Zeilenhöhe

Der Rand des Inline-Elements wird durch die Schriftgröße und nicht durch die Zeilenhöhe gesteuert

Ränder werden nicht oben und unten auf nicht ersetzte Inline-Elemente angewendet

margin-left, padding -left, border-left werden auf den Anfang des Elements angewendet; margin-right, padding-right, border-right wird auf das Ende des Elements angewendet

Ersatzelement Inline-Ersetzungselemente müssen den Zeilenhöhenwert verwenden, damit die Elemente vertikal ausgerichtet werden und korrekt positioniert werden können. Denn der Prozentwert von Vertical-Align wird relativ zur Zeilenhöhe des Elements berechnet. Für die vertikale Ausrichtung spielt die Höhe des Bildes selbst keine Rolle, der Schlüssel ist der Wert der Zeilenhöhe

Standardmäßig befinden sich Inline-Ersetzungselemente auf der Grundlinie. Wenn Sie dem ersetzten Element einen unteren Innenabstand, Ränder oder Rahmen hinzufügen, wird der Inhaltsbereich nach oben verschoben. Die Grundlinie des ersetzten Elements ist die Grundlinie des letzten Zeilenfelds im normalen Fluss. Sofern der Inhalt des Ersatzelements nicht leer ist oder sein Überlaufattributwert nicht sichtbar ist, ist die Grundlinie in diesem Fall die Unterkante des Rands

DefinitionVertical-align wird verwendet, um die vertikale Ausrichtung aller vertikal ausgerichteten Elemente zu bestimmen

Wert: Grundlinie | |. top |. middle |. Ersetzungselemente, Tabellen Zelle

Vererbung: Keine

Prozentsatz: Relativ zur Zeilenhöhe des Elements line-height

[Hinweis] Der Prozentwert der vertikalen Ausrichtung in IE7-Browser ist nicht dasselbe. Er unterstützt Dezimalzeilenhöhen und der Anzeigeeffekt unterscheidet sich von dem von Standardbrowsern, wenn Werte wie Grundlinie, Mitte und Textunterseite verwendet werden. Eine gängige Lösung besteht darin, das Inline-Element auf festzulegen display:inline-block

vertical-align:baselinebaseline(元素的基线与父元素的基线对齐)   
vertical-align:sub(降低元素的基线到父元素合适的下标位置)   
vertical-align:super(升高元素的基线到父元素合适的上标位置)   
vertical-align:bottombottom(把对齐的子元素的底端与行框底端对齐)   
vertical-align:text-bottom(把元素的底端与父元素内容区域的底端对齐)   
vertical-align:top(把对齐的子元素的顶端与行框顶端对齐)   
vertical-align:text-top(把元素的顶端与父元素内容区域的顶端对齐)   
vertical-align:middle(元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐)   
vertical-align:(+-n)px(元素相对于基线上下偏移npx)   
vertical-align:x%(相对于元素的line-height值)   
vertical-align:inherit(从父元素继承vertical-align属性的值)

p{   
    line-height: 100px;   
    width: 100px;   
    text-align: center;   
    border: 1px solid black;   
}   
  
<p>测试文字</p>

p{   
    line-height: 200px;   
    text-align: center;   
}   
img{   
    vertical-align: middle;   
}   
<p>  
    <img src="#" alt="#">  
</p>

//正确1<p> <img src="#" alt="#"></p>
//正确2<p><img src="#" alt="#"><!-- 这里要折行或空格 --></p>
//错误<p><img src="#" alt="#"></p>

p{ line-height: 200px; text-align: center; font-size: 0;}img{ vertical-align: middle;}

<p> <img src="#" alt="#"></p>

p{   
    height: 100px;   
    width: 200px;   
    background-color: pink;   
    text-align: center;   
}   
span{   
    display:inline-block;   
    vertical-align: middle;   
    line-height: 20px;   
    width: 100px;   
}       
i{   
    display: inline-block;   
    height: 100%;   
    vertical-align: middle;   
}

<p>  
  <i></i><span>我是特别长的特别长的特别长的特别长的多行文字</span>  
</p>

img{ vertical-align: -5px;}

img{ vertical-align: text-bottom;}