CSS-Trick: Vertikal zentrierter Text neben einem Bild

Wer Webstandards einhalten möchte, verzichtet auf Tabellen als Layoutmittel. Damit verabschiedet man sich aber auch von dem praktischen valign, dass man nur in Tabellenzellen anwenden darf. Es bewirkt, dass sich Text in einer Tabellenzelle vertikal zentriert darstellen lässt.

Um genau das mit CSS zu erreichen muss man einen kleinen Trick anwenden:

Das Bild wird mit float nach rechts oder links gestellt, der direkt darauf folgende Text bekommt eine Zeilenhöhe zugewiesen, die größer als normal ist. Den exakten Wert musst du selber herausfinden, denn je nach Bildgröße variiert dieser. Im Beispiel habe ich eine Zeilenhöhe von 50 Pixeln genommen.

Text mit CSS vertikal zentriert

Beispielcode

<img src="test.jpg" style="float:left; margin-right:10px;">
<p style="line-height:50px;">Dieser Text ist vertikal zentriert</p>

Dieses Beispiel funktioniert nur mit einzeiligem Text. Es gibt auch Lösungen für mehrzeiligen Text, diese erfordern aber deutlich mehr CSS-Code und DIV-Blöcke. Wer das unbedingt braucht, kann sich hier ein Beispiel ansehen.

Verwandte Artikel

Schreib einen Kommentar