vertical-align

Übersicht

Die vertical-align Eigenschaft bestimmt die vertikale Ausrichtung in inline Elementen oder in Tabellenzellen.

  • Standardwert: baseline
  • Anwendbar auf: inline Elemente und Tabellenzellen
  • Vererbbar: Nein
  • Prozentwerte: Beziehen sich auf den Wert der line-height Eigenschaft
  • Medium: visuell
  • berechneter Wert: für Prozent- und Längenangaben die absolute Länge; sonst wie festgelegt

Syntax

vertical-align: baseline | sub  | super | text-top | text-bottom | middle | top | bottom | <Prozentzahl> | <Länge> | inherit 

Werte

Bei Elementen, die keine Grundlinie besitzen, beziehen sich die Angaben auf die untere äußere Kante (bottom margin edge).

Für inline Elemente

baseline
Die Grundlinie des Elements liegt auf der Grundlinie des Elternelements.
sub
Das Element ist tiefgestellt.
super
Das Element ist hochgestellt.
text-top
Die Oberkante des Elements liegt auf der Oberkante der Schrift des Elternelements.
text-bottom
Die Unterkante des Elements liegt auf der Unterkante der Schrift des Elternelements.
middle
Die Mitte des Elements liegt auf der Mitte der Kleinbuchstaben des Elternelements.
top
Die Oberkante des Elements liegt auf der Oberkante des Elternelements.
bottom
Die Unterkante des Elements liegt auf der Unterkante des Elternelements.
<Prozentzahl>
Die Unterkante des Elements liegt um einen prozentualen Wert höher als die Unterkante des Elternelements. Die Anteile beziehen sich auf den Wert der line-height Eigenschaft.
<Länge>
Die Unterkante des Elements liegt um einen bestimmten Wert höher als die Unterkante des Elternelements. Negative Werte sind erlaubt.
inherit
Der Wert des Elternelements wird geerbt.

Für Tabellen

baseline, sub, super, text-top, text-bottom, <Prozentzahl> und <Länge>
Die Grundlinie des Elements liegt auf der Grundlinie des Elternelements
top
Die Oberkante der Textzeile liegt auf der Oberkante der Tabellenzelle.
middle
Die vertikale Mitte der Textzeile liegt auf der Mitte der Tabellenzelle.
bottom
Die Unterkante der Textzeile liegt auf der Unterkante der Tabellenzelle.
inherit
Der Wert des Elternelements wird geerbt.

Beispiele

Ergebnis Quelltext
inline-Elemente
Text Text Text
vertical-align:baseline
Text Text Text
vertical-align:sub 
Text Text Text
vertical-align:super 
Text Text Text
vertical-align:text-top
Text Text Text
vertical-align:text-bottom
Text Text Text
vertical-align:middle 
Text Text Text
vertical-align:top
Text Text Text
vertical-align:bottom
Tabellenzellen
Text
vertical-align:top
Text
vertical-align:middle
Text
vertical-align:bottom

Browser Kompatibilität

Browser ab Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 4.0
Safari (WebKit) 1.0 (85)

Spezifikation

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter:
Mitwirkende an dieser Seite: SJW, Michael2402, fscholz, patpir
Zuletzt aktualisiert von: fscholz,
Seitenleiste ausblenden