vertical-alignNN 6 IE 4 CSS 1

Vererbt: Nein

Für dieses Attribut gibt es zwei Sätze von Werten, die verschiedene Auswirkungen auf das Inline-Element haben. Der wichtigste Bezugspunkt für ein Inline-Element ist seine eigene Begrenzungsbox. Die beiden Werte top und bottom bestimmen, wie Text innerhalb der Begrenzungsbox dargestellt wird, nämlich bündig mit dem oberen bzw. unteren Rand.

Dieses Attribut ist nicht auf Inline-Textpassagen beschränkt, es kann auch auf Bilder und Tabellen angewendet werden. Alle anderen Einstellungen für vertical-align definieren die vertikale Positionierung der gesamten Elementbox relativ zum Textinhalt des übergeordneten Elements. Beim Standardwert baseline werden die Grundlinien des Inline-Textes (bzw. die Unterkante eines Elements wie img) und des übergeordneten Textes auf gleicher Höhe angeordnet. Dadurch kann ein em-Element als eigenes Inline-Element definiert sein, aber trotzdem mit dem umgebenden p-Element auf der Grundlinie eine Einheit bilden. Die restlichen Konstanten (und Prozent- oder Längenwerte) bestimmen, wo die Begrenzungsbox des Elements relativ zum übergeordneten Element platziert wird. Bei einem positiven Prozent- oder Längenwert wird das Element so weit wie angegeben über der Grundlinie positioniert, bei einem negativen Wert unter der Grundlinie. Prozentwerte werden ausgehend von der Zeilenhöhe berechnet.

 
CSS-Syntax
 
vertical-align: vertAlignType | length | percentage
 
Wert

Zwei Konstanten legen die Ausrichtung des Texts im Element selbst fest: bottom | top.

Sechs Konstanten bestimmen die Ausrichtung der Begrenzungsbox des Elements relativ zum umgebenden Text (des übergeordneten Elements): baseline | middle | sub | super | text-bottom | text-top. Beim Wert baseline liegen die Grundlinien des Inline- und des übergeordneten Elements auf einer Höhe. Bei der Einstellung middle wird die vertikale Mitte des Elements mit der Grundlinie plus einer halben x-Höhe in der Schrift des übergeordneten Elements ausgerichtet. sub und super verschieben das Element in eine tief- bzw. hochgestellte Position, allerdings wird dabei die Schriftgröße nicht geändert. Beim Wert text-bottom wird die Unterkante des Elements an der Unterkante der Schriftlinie des übergeordneten Elements ausgerichtet; text-top bewirkt das Gleiche mit den Oberkanten.

 
Anfangswert

baseline

 
Beispiel
 
span.sup {vertical-align: super; text-size: smaller}
 
Gilt für

Nur Inline-Elemente.

 
Objektmodellreferenz
 
[window.]document.getElementById("elementID").style.verticalAlign