Ü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 |
Numerische Angaben | |
Text Text Text |
vertical-align:50% |
Text Text Text |
vertical-align:5px |
Text Text Text |
vertical-align:.5em |
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) |