Gelöst: CSS3 und immer noch Problem mit vertikaler zentrierung?

[molily]

Hallo,

alles klar, line-height anstatt height bringt das gewünschte Ergebnis. Die Logik dahinter würde mich noch interessieren, nicht weshalb es dann funktioniert(das hast Du ausreichend erklärt: Zentrierung innerhalb Zeile), sondern warum das so(zeilen-anstatt block/containerbasierend) angedacht ist?

Ich verstehe deine Frage nicht ganz. line-height ist hier aber auch nur ein Hack; ein schlechterer als display: table-cell meiner Meinung nach.

line-height ist nicht dazu gedacht, Text vertikal im umgebenden Element zu zentrieren. Es soll zunächst einmal die typografische Zeilenhöhe regeln. Es für die Zentrierung zu benutzen ist unschön: Zunächst einmal muss man die Höhe hartkodieren und hat somit zwei Stellen, die man bei der Höhenänderung anpassen muss. Ferner kann der Text in dem Element nicht zweizeilig sein, denn eine zweite Zeile würde dazu führen, dass der Text die Box verlässt. In der Regel kann man nicht garantieren, dass ein wechselnder Text auf allen Geräten in einer Zeile gesetzt wird.

display: table-cell und vertical-align: middle ist viel flexibler und hat solche Nebenwirkungen nicht. Diese Lösung sowie Flexbox wurde ja auch mehrfach gezeigt.

Mathias