Interpretieren Sie das Vertical-Align-Attribut in CSS

Syntax:

vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length

Parameter:
baseline: Richtet den Inhalt von Objekten, die die Valign-Funktion unterstützen, an der Baseline aus
sub: Der Index von vertikal ausgerichtetem Text
super: Richtet den hochgestellten Text vertikal aus.
top: Richtet den Inhalt des Objekts, das die Valign-Funktion unterstützt, am oberen Rand des Objekts aus.
text-top: Richtet den Text des Objekts aus, das die Valign-Funktion unterstützt an der Oberseite des Objekts
Mitte: Wird unterstützt. Der Inhalt des Objekts mit der Valign-Funktion wird an der Mitte des Objekts ausgerichtet.
Unten: Richtet den Text des Objekts mit der Valign-Funktion an der Unterseite des Objekts aus Objekt
text-bottom: Richtet den Text des Objekts mit der Valign-Funktion am oberen Rand des Objekts aus
Länge: CSS2 Ein Längenwert, der aus einer Gleitkommazahl und einer Einheitenkennung | oder einem Prozentsatz besteht. Kann negativ sein. Definiert den Versatz von der Grundlinie. Die Grundlinie ist 0 für numerische Werte und 0 % für Prozentsätze. Derzeit unterstützt IE5 dies nicht. Siehe Längeneinheit

Beschreibung:

Legt die vertikale Ausrichtung des Objektinhalts fest oder ruft sie ab.
Die entsprechende Skriptfunktion ist VerticalAlign. Bitte sehen Sie sich andere Bücher an, die ich geschrieben habe.

Beispiel:

td { vertical-align : center; }

css Warum funktioniert das Hinzufügen von Vertical-Align: Middle zu Span nicht?

Vertical-Alignment funktioniert nur bei Elementen mit bestimmten Anzeigestilen (z. B. Zellenanzeigemodus: Tabelle-Zelle). Um eine vertikale Mittelausrichtung nach oben und unten zu erreichen, können Sie daher den folgenden Stil verwenden:

display:table-cell;      /*按照单元格的样式显示元素*/
vertical-align:middle;   /*垂直居中对齐*/

Im Vergleich zum Festlegen des Zeilenhöhenattributs ist die obige Einstellungsmethode mit Situationen kompatibel, in denen der Text mehrere Zeilen enthält.

Das Folgende ist ein Beispiel:

HTML-Element erstellen

<div>
    <span>测试测试，即便是多行，我也还是垂直居中对齐的。</span>
</div>

CSS-Stil festlegen

div{ width:200px; height:115px; border:4px solid #ebcbbe; display:table-cell;vertical-align: middle;

Vertical -align: top; Was bedeutet das?

vertikal-align wird verwendet, um die vertikale Ausrichtung der Grundlinie eines Inline-Elements festzulegen relativ zur Grundlinie, in der sich das Element befindet: text-top | um den oberen Rand des Textes vertikal auszurichten. Dieses Attribut legt die Ausrichtung des Zellinhalts am häufigsten in td fest und steuert die Position von
internen Objekten
Die Wirkung dieses Attributs ist in jedem Browser unterschiedlich. Verwenden Sie es daher mit Vorsicht

Das obige ist der detaillierte Inhalt vonInterpretieren Sie das Vertical-Align-Attribut in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!