Vertikale (mittige) Ausrichtung in einem (X)HTML Element
Oft möchte man ein Zeichen oder Wort in einem (X)HTML-Element vertikal ausrichten (z.B. für ein Menü o.ä.).
Doch die vorhandene CSS-Eigenschaft “vertical-align” ist leider nicht immer zuverlässig.
Würde man zum Beispiel im Absatz mit fester Höhe eine Zeile oder ein einzelnes Wort ausgeben wollen, so positioniert sich die Zeichenfolge oben links.
In der Ausgabe würde der Text oben Links stehen:
Mit dem CSS-Befehl "line-height" kann der Browser jedoch die Mitte der Zeile errechnen und dadurch den eigentlichen Inhalt vertikal zentrieren:
Aussehen würde es nun so:
Doch die vorhandene CSS-Eigenschaft “vertical-align” ist leider nicht immer zuverlässig.
Würde man zum Beispiel im Absatz mit fester Höhe eine Zeile oder ein einzelnes Wort ausgeben wollen, so positioniert sich die Zeichenfolge oben links.
Eine mögliche Lösung
Mit der CSS-Eigentschaft "height" wird dem Element eine feste Höhe und mit "color" (color zur Verdeutlichung) eine Hintergrundfarbe zugewiesen.p { height: 50px; color:#abc7db; }
In der Ausgabe würde der Text oben Links stehen:
Mit dem CSS-Befehl "line-height" kann der Browser jedoch die Mitte der Zeile errechnen und dadurch den eigentlichen Inhalt vertikal zentrieren:
p { height: 50px; color:#abc7db; line-height: 50px; }
Aussehen würde es nun so:
Kleiner Nachteil
Da die Default-Höhe der Zeile geändert wird, ist diese Lösung für Texte, die über mehrere Zeilen verteilt sind, nicht zu empfehlen.
abgelegt in Codeschnipsel Ι geposted von admin - 2007-10-08
