CSS: Zentrieren
Erstellt: 27.04.2006 | Aktualisiert: 05.01.2009
Horizontales und Vertikales zentrieren von XHTML-Elementen: Wie können CSS-Layouts im Browser horizontal und vertikal zentriert dargestellt werden?
Horizontal
Das gesammte Layout wird in einem Container verpackt. Mit der Eigenschaft margin lässt sich diese Box horizontal zentrieren.
#container {
width:760px;
margin:0 auto;
}
Leider kommt der Internet Explorer 5.x mit dieser Anweisung nicht zurecht. Durch hinzufügen der Eigenschaft text-align im body-Element kann diese Fehlinterpretation umgangen werden.
body {
text-align:center;
}
#container {
width:760px;
margin:0 auto;
text-align:left;
}
Die Eigenschaft text-align: center im body-Element bewirkt das zentrieren des Containers. Durch die Deklaration text-align: left i container-Element wird der Text wieder normal nach links ausgerichtet.
Horizontal UND Vertikal
Vertikales Zentrieren ist keine einfache Sache. Die Varianten sind zahlreich, die richtige Darstellung in allen Browsern eigentlich ein Ding der Unmöglichkeit. Folgend einige Vorschläge:
- Vertical Centering with CSS
- Vertical Centering in CSS
- W3C Tips & Tricks: Centering Things
- Vertical alignment Problem
- CSS vertical centering using float and clear
- CSS Frames v2, full-height