CSS: Elemente vertikal zentrieren

Bild im Rahmen zentrieren

Ein Inline-Element (span, img, b, u, i, em…) in einem Blockelement (div, p, h1…) vertikal zu zentrieren ist nicht leicht. Zwar gibt es die CSS-Eigenschaft vertical-align, aber leider ist deren Verhalten recht eigen:

div { height:50px; }
span { vertical-align:middle; }
span


Ein recht ernüchternder Anfang. Dann vielleicht die selbe Höhe verwenden:

div { height:50px; }
span { vertical-align:middle; height: 50px; }
span

Klappt auch nicht. Span ist ein Inline-Element und hat als solches gar keine Höhe. Die Angabe hat keinerlei Auswirkung.

Abhilfe schafft stattdessen die leider weniger bekannte Eigenschaft line-height:

div { height:50px; }
span { vertical-align:middle; line-height: 50px; }
span

Checkbox und Label auf gleicher Höhe

Ein ähnliches Problem stellt sich oft, wenn man Checkbox und Label auf der selben Höhe haben möchte. Nicht selten lässt sich auch mit vertical-align kein gleichmäßiges Bild erzeugen:

Auch hier ist oft die unterschiedliche Zeilenhöhe schuld. Eine Korrektur führt zur gewünschten Höhengleichheit:

input { vertical-align:middle;line-height:1em; }
label { vertical-align:middle; }

Ein Kommentar

Kommentare sind geschlossen.