CSS: Inhalt allseitig zentrieren
23. October 2004 – 0:39 Uhr
Das Problem: Inhalte auf einer (X)HTML-Seite sollen sowohl horizontal als auch vertikal zentriert werden. Dies nach Möglichkeit natürlich – CSS wie XHTML – ‘valide‘.
Die Lösung basiert auf absoluter Positionierung:
Das DIV, das die zu zentrierenden Inhalte enthalten wird, wird je 50 Prozent von links (left) und von oben (top) abgesetzt. Damit setzt man die linke obere Ecke des DIVs genau in die Seitenmitte. Festlegen muss man für das DIV nun eine Höhe und eine Weite (height, width). Jeweils die Hälfte dieser Werte setzt man nun als negative obere (margin-top) bzw. linke (margin-left) ‘margin‘. Hiermit verschiebt man folgerichtig die geometrische Mitte des DIVs in die Seitenmitte. Hier ein Beispiel zur Anschauung, CSS im Quelltext:
Komplett zentrierter Inhalt mit CSS
Die Lösung hatte ich selbst einmal vor geraumer Zeit ertüftelt (schwitz…), aber inzwischen wieder beiseite gelegt und vergessen, weil nie genutzt – wiedergefunden habe ich sie dankenswerterweise just hier:
CSS-Intensivstation
Dort auch der Hinweis, dass diese Lösung wohl nicht im IE/Mac funktioniert, was ich nicht überprüfen kann.
Aber sie sollte bei Kronns zentralem Browserproblem trotzdem hilfreich sein…
Dieser Inhalt (Textbeitrag und Fotos) ist unter einer Creative-Commons-Lizenz BY-NC-ND lizenziert.
