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; }

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

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

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; }

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; }