Websiteentwicklung: CSS: vertikale Ausrichtung
Die Eigenschaft vertical-align dient zur vertikalen Ausrichtung des Inhaltes inzeiliger Elemente oder von Inhalt in Tabellenzelle.
Mögliche Werte sind eine Längenangabe, ein Prozentwert, welcher sich dann auch die line-height des Elementes bezieht oder eines folgender Schlüsselwörter:
- 'inherit' - geerbt
- 'baseline' - an der Grundlinie (des Elternelementes) ausrichten, der Initialwert
- 'sub' - tiefgestellt
- 'super' - hochgestellt
- 'middle' - mittig (Mittelpunkt der Box fällt zusammen mit der Grundlinie des Elternelements plus 0.5ex)
- 'text-top' - am oberen Textrand
- 'text-bottom' - am unteren Textrand
- 'top' - oben in der Box der Zeile
- 'bottom' - unten in der Box der Zeile
Bei einer Längenangabe 0 oder einer Prozentangabe 0% entspricht dies 'baseline', dem Initialwert. Positive Werte verschieben die Box nach oben, negative nach unten.
Die Eigenschaft wird nicht vererbt und ist anwendbar auf inzeilige Elemente und Tabellenzellen bei visuellen Medien. Die Werte 'sub', 'super', 'text-top' und 'text-bottom', Längenangaben und Prozentangaben sind nicht auf Tabellenzellen anwendbar und werden wie 'baseline' interpretiert.
Beispiele (mit Rahmen für den Absatz und rotem outline für das vertikal angeordnete Element):
'baseline':
Davor. Irgendein Text als Test.
etc. Dahinter.
'bottom':
Davor. Irgendein Text als Test.
etc. Dahinter.
'top':
Davor. Irgendein Text als Test.
etc. Dahinter.
'middle':
Davor. Irgendein Text als Test.
etc. Dahinter.
'sub':
Davor. Irgendein Text als Test.
etc. Dahinter.
'super':
Davor. Irgendein Text als Test.
etc. Dahinter.
'text-top':
Davor. Irgendein Text als Test.
etc. Dahinter.
'text-bottom':
Davor. Irgendein Text als Test.
etc. Dahinter.
'-100%':
Davor. Irgendein Text als Test.
etc. Dahinter.
'1em':
Davor. Irgendein Text als Test.
etc. Dahinter.
| davor davor | baseline | dahinter dahinter |
| davor davor | bottom | dahinter dahinter |
| davor davor | top | dahinter dahinter |
| davor davor | middle | dahinter dahinter |
| davor davor | sup | dahinter dahinter |
| davor davor | super | dahinter dahinter |
| davor davor | text-bottom | dahinter dahinter |
| davor davor | text-top | dahinter dahinter |
| davor davor | 100% | dahinter dahinter |
| davor davor | -0.5em | dahinter dahinter |
| davor davor | bottom (mit th) | dahinter dahinter |
|---|