Detaillierte Erläuterung der Verwendung des Attributs Vertical-Align in CSS

Definition von Vertical-Align

W3C-Definition von Vertical-Align: Das Vertical-Align-Attribut legt die vertikale Ausrichtung des Elements fest. Diese Eigenschaft definiert die vertikale Ausrichtung der Grundlinie eines Inline-Elements relativ zur Grundlinie der Zeile, in der das Element erscheint. Ermöglicht die Angabe negativer Längenwerte und Prozentwerte. Dadurch wird das Element abgesenkt, anstatt es anzuheben. In Tabellenzellen legt diese Eigenschaft die Ausrichtung des Zellinhalts im Zellfeld fest.

Text wird normalerweise auf der Grundlage einer unsichtbaren Grundlinie ausgerichtet, wobei sich die Unterseite der Buchstaben darüber befindet. Mit der Eigenschaft „vertikal ausrichten“ können Buchstaben oder Bilder über oder unter der Textgrundlinie nach oben oder unten verschoben werden. Zu den Werten des Vertical-Align-Attributs gehören Baseline, Sub, Super, Top, Text-Top, Middle, Bottom, Text-Bottom usw., wobei der Anfangswert Baseline ist.

Grundlinie – Richtet die Grundlinie des untergeordneten Elements an der Grundlinie des übergeordneten Elements aus. Bei Elementen ohne Grundlinie, wie z. B. Bildern oder Objekten, richten Sie deren Unterseite an der Grundlinie des übergeordneten Elements aus.

sub (below) – Platziert das Element darunter (tiefgestellt) und richtet dabei insbesondere die Grundlinie des Elements an der bevorzugten tiefgestellten Position seines übergeordneten Elements aus.

super (oben) – platziert das Element darüber (hochgestellt), wobei insbesondere die Grundlinie des Elements an der bevorzugten hochgestellten Position seines übergeordneten Elements ausgerichtet wird.

text-top – richtet den oberen Rand des Elements am oberen Rand des höchsten Buchstabens seines übergeordneten Elements aus.

top – richtet die Oberseite des Elements an der Oberseite des höchsten Objekts in der Reihe aus.

Mitte – Zentriert das Element vertikal.

unten (unten) – richtet die Unterseite des Elements an der Unterseite des untersten Elements in der Reihe aus.

text-bottom (text-bottom) – richtet den unteren Rand des Elements am unteren Rand der Schriftart des übergeordneten Elements aus.

Interpretation von Vertical-Align

Die Definition von Vertical-Align auf W3C kann grob in zwei Teile unterteilt werden:

Der erste Typ Zur Verwendung Schauen Sie sich zunächst den folgenden Satz an: „In Tabellenzellen legt diese Eigenschaft die Ausrichtung des Zellinhalts im Zellfeld fest.“ Dies ist leicht zu verstehen, wenn Sie dem td einer Tabelle einen vertikalen Ausrichtungsstil hinzufügen , wird der Inhalt der Tabelle vertikal zentriert, wenn Sie ein Vertical-Align:Bottom angeben, wird er unten ausgerichtet, und wenn Sie ein Vertical-Align:Top angeben, wird er oben ausgerichtet.

Für die zweite Verwendung siehe den Satz auf der vorherigen Seite: „Dieses Attribut definiert die vertikale Ausrichtung der Grundlinie eines Inline-Elements relativ zur Grundlinie der Linie, in der sich das Element befindet.“ Ich weiß nicht, wie man Fachsprache spricht, daher kann ich Ihnen eine Analogie geben: Angenommen, es gibt zwei Inline-Elemente a und b. Sowohl a als auch b sind img ) von b wird an der Mittelposition von a ausgerichtet, wie unten gezeigt:

Wenn sowohl a als auch b einen Vertical-Align:Middle-Stil hinzufügen, werden sie an der Mittelposition des jeweils anderen ausgerichtet , werden ihre Mittellinien in vertikaler Richtung ausgerichtet, wie unten gezeigt:

Zum Beispiel werden img und span zusammen angezeigt. Wenn Sie möchten, dass der Text in der Mitte des Bildes ausgerichtet wird, müssen Sie img hinzufügen {vertikal-align:middle;}

zum Bild. Ein weiteres Beispiel ist die gemeinsame Verwendung von Eingabe und Spanne in Google Firefox IE8 und höher. Standardmäßig befindet sich die Spanne in der Mitte der Eingabe. In ie6/ie7 wird jedoch die Unterseite der Spanne an der Unterseite der Eingabe ausgerichtet. Die Möglichkeit, eine Vereinheitlichung zu erreichen, besteht darin, der Eingabe Eingabe{vertical-align:middle;} hinzuzufügen, um ihre vertikalen Mittellinien auszurichten span{vertical-align:middle;}

Verwendung von Vertical-align

1. Wird für Inline-Elemente verwendet

Das folgende Bild ist ein Beispiel zur Veranschaulichung die Verwendung des Vertical-Align-Attributs.

img{ vertical-align:middle;}
<div><img src="http://pic2.58.com/ui7/job/hire/pic4.png" />看看我的位置</div>

2. Wird in Tabellen verwendet

Das Vertical-Align-Attribut kann direkt in Tabellenzellen verwendet werden und die Wirkung entspricht dem Valign-Attribut in HTML.

td{ height:40px; vertical-align:middle;}
<table><tr><td>这是一个测试</td><td>这是一个测试</td></tr><tr><td>这是一个测试</td><td>这是一个测试</td></tr></table>

3. Wird für Blockelemente verwendet

Das Vertical-Align-Attribut ist nicht auf Blockelemente anwendbar, weshalb manche Leute das Vertical-Align-Attribut für ungültig halten. Aber wir können das Display-Attribut verwenden, seinen Wert auf table-cell setzen, das Blockelement in eine Zelle umwandeln und dann das Vertical-Align-Attribut verwenden.

div{width:500px; height:200px; border:1px blue solid; display: table-cell; vertical-align: middle;}
<div><img src="http://pic2.58.com/ui7/job/hire/pic4.png" /></div>

Es ist zu beachten, dass es bei der oben genannten Methode Kompatibilitätsprobleme gibt. IE6/IE7 und Browser mit IE als Kern wie World Window, 360, Aoyou und andere Browser unterstützen diese Verwendung nicht, Chrome und Firefox jedoch schon.

Um mit ie6/7 kompatibel zu sein, können Sie dem div die folgenden Attribute hinzufügen

div{
*display:block;
 
*font-size:175px;/*高度为200px，  则200*0.873约为175px* 撑开/ 
 }

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Attributs Vertical-Align in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!