CSS vertical-align • Vertikale Ausrichtung von Elementen

Fotokurse und Schulungen
»Digitale Fotografie - Bildgestaltung«
Noch nie war es so einfach, Fotografieren zu lernen

Fotografie von ihrer besten Seite: Aktuelle Kameras, Bildbearbeitung und Fototipps auf foto.5lux.de

Nov 07

CSS vertical-align • Vertikale Ausrichtung von HTML-Elementen

vertical-align richtet Bilder und Texte in Tabellenzellen und Textblöcken an einer Grundlinie aus. Diese Grundlinie – baseline – wird anhand eines Textes oder einer Linie bestimmt.

Dabei ist vertical-align in erster Linie für die Ausrichtung von Inline-Elementen gedacht und nicht für die Positionierung von Blockelementen.

In Texten richtet vertical-align eine Gruppe von Zeichen relativ zur Grundlinie des Text aus, in Tabellenzellen anhand der oberen oder unteren Grenze der Zelle.

vertical-align

IE4+ M1 N4+ O5+ Sa1 CSS1/CSS2 Erblich: Nein

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit: Der Werte top, middle und bottom sind für Tabellenzellen vorgesehen. sub, super, text-top, text-bottom werden für Ausrichtung in Textboxen verwendet.

vertical-align für Texte

Bemerkung: text-top und text-bottom waren bei Firefox 2 vertauscht.

Mit vertical-align: baseline auf der Grundlinie
Mit vertical-align: sub unter der Grundlinie
Mit vertical-align: super über der Grundlinie
Die obere Grenze von vertical-align: text-top liegt unter der x-Höhe des Textes
Die untere Grenze von vertical-align: text-bottom liegt über der x-Höhe des Textes
Mit vertical-align: -15% um ein paar Prozent tiefergestellt
Mit vertical-align: 10px um ein paar Pixel höher gestellt

vertical-align für Tabellenzellen

top	middle	bottom
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin tincidunt, odio nec sodales mattis, ...	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin tincidunt, odio nec sodales mattis, ...	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin tincidunt, odio nec sodales mattis, ...