Ü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-heightEigenschaft - 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-heightEigenschaft. - <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) |