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