Horizontal zentrierte Layouts
12. September 2008, 16:58Bekanntlich führen viele Wege nach Rom. Heute möchte kurz auf die Möglichkeiten eingehen, mit denen man einen Container oder ein ganzes Layout horizontal zentriert ausrichten kann!
Negative Margins
Eine interessante Möglichkeit, die vor allem für Layouts mit einer festen Breite geeignet ist, bieten negative Margins. Mit negativ ist hier der Wert des Margins gemeint. Zum Beispiel: margin: 0 -10px 0 0;
Meine Lösung für einen Container mit einer Breite von 500px sieht somit auch ziemlich ähnlich aus:
body {margin:0px; padding:0px;} /* Für die Cross-Browser Kompatibilität */
#Content {
position:absolute;
left:50%;
width:500px;
margin-top:50px;
margin-left:-266px; /* Halbe Breite + Padding + Rand = -266px */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}Das ist eigentlich selbsterklärend, doch ich möchte noch genauer darauf eingehen, was da genau passiert. Der Container wird zuerst durch position:absolute; left:50%; ins horizontale Zentrum geschoben. Danach wird der linke Aussenabstand auf minus die Hälfte der Box gesetzt. Wichtig hierbei ist, dass man Innenabstand und Rahmen auch berücksichtigt. In meinem Beispiel ist das also margin-left:-266px;
Auto-Width Margin
Die CSS-Eigenschaft Margin bietet von Haus aus eine nette kleine Funktion, mit der das horizontale Zentrieren von Containern zum Kinderspiel wird. Das funktioniert auch in allen gängigen Browsern mit CSS2-Support.
Nur der Internet Explorer 5 (Windows) macht uns einen Strich durch die Rechnung. Der IE wendet das text-align Attribut bei Block-Level-Elementen falsch an, doch dafür gibt es eine kleine Lösung:
Wenn man beim übergeordneten Block-Leven-Element (meistens <body>) text-align: center; angibt, wird der Container korrekt ausgerichtet.
Dummerweise ist das text-align Attribut vererbbar, weshalb dann in anderen Browsern die Schrift wirklich rechts ausgerichtet wäre. Oft muss man text-align explizit auf das zentrierte Element anwenden, um den Auswirkungen der IE-Lösungen entgegenzuwirken. Das fertige Stylesheet sieht dann wie folgt aus:
body {
margin:50px 0px; padding:0px; /* Für die Cross-Browser Kompatibilität */
text-align:center; /* Hack für IE5/Win */
}
#Content {
width:500px;
margin:0px auto; /* Reche und linke Aussenabstände auf
"automatisch" eingestellt */
text-align:left; /* IE5 Hack umgehen */
padding:15px;
border:1px solid #333;
background-color:#eee;
}
Tags: CSS, HTML, Stylesheet
