Wie man Blockelemente, die nebeneinander positioniert sind, gemeinsam zentriert - dies scheint eine Frage, auf die viele Webmaster irgendwann stoßen - zumindest wird diese in meinem Webmaster-Forum sehr häufig gestellt.
Zentrieren
Während Inline-Elemente wie Links oder Bilder mit text-align:center zentriert werden, wird dies bei Block-Elementen mit fester Breite durch die Setzung des Wertes auto für den linken und rechten Außenabstand erreicht
<div style="width:760px; margin-left:auto; margin-right:auto">Inhalt des zentrierten Blockelementes</div>
Befindet sich der Internet Explorer 6 nicht im Standards Mode (siehe hierzu Erläuterungen von Carsten Protsch zum Doctype-Switching) und / oder möchte man den Internet Explorer 5 noch berücksichtigen, muss man das Blockelement zusätzlich durch ein text-align:center im übergeordneten Blockelement zentrieren. Die sich vererbende Inline-Zentrierung wird gegebenenfalls durch ein text-align:left im zentrierten Blockelement wieder aufgehoben. Beispiel HTML-Code:
<div id="a">
<div id="b">Inhalt des zentrierten Blockelementes</div>
</div>
... und der dazugehörige CSS-Code:
#a {
text-align:center;
}
#b {
text-align:left;
width:760px;
margin-left:auto;
margin-right:auto;
}
Nebeneinander positionieren und gemeinsam zentrieren
Oftmals wird versucht, die oben beschriebene Zentrierung auf Elemente anzuwenden, die durch absolut positioniert sind. Dies kann nicht gelingen, da diese Elemente ja bereits absolut an dem Anzeigebereich ausgerichtet und somit fixiert sind. Die absolute Positionierung wird gerade von CSS-Lernenden häufig dazu verwendet, Blockelemente nebeneinander zu positionieren. Um solche Elemente denoch gemeinsam zu zentrieren, kann man diese stattdessen mit float:left und / oder float:right nebeneinander anordnen (siehe hierzu auch Erläuterungen auf SELFHTML). Das folgende Beispiel enthält die klassische Anordnung der Elemente Header, Navigationsleiste, Content-Bereich und Footer. Alle zusammen befinden sich in einem gemeinsamen Container #wrapper, der zentriert werden soll. Der HTML-Code für den body sieht folgendermaßen aus:
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="navi">Navigation auf linken Seite</div>
<div id="content">Content-Bereich</div>
<div id="footer">Footer</div>
</div>
</body>
Der dazugehörige CSS-Code:
html, body {
margin:0;
padding:0;
text-align:center; /* IE 5 */
}
#wrapper {
margin:0 auto;
width:760px;
text-align:left;
}
#header {
height:100px;
}
#navi {
width:100px;
float:left;
}
#footer {
clear:left;
}
Die Navigation erhält eine feste Breite und die Eigenschaft float:left. Dadurch wird das im HTML-Code folgende Element #content rechts der Navigation angeordnet. Der Footer, der wieder die volle Breite des übergeordneten Elementes #wrapper erhalten soll, erhält ein clear:left, um den Umfluss zu beenden. Der Container #wrapper wird schließlich auf die oben beschriebene Weise zentriert.