Websiteentwicklung: CSS: vertikale Ausrichtung

Aus Wikibooks


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.

Beispiel für Tabelle:
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