7. Elemente auf der Seite zentrieren
Die Ausgangslage für diesen Trick ist eine Website, die als zentrales Gestaltungselement eine Box von 700 Pixeln Breite verwendet. Diese Box soll zentriert im Browserfenster erscheinen, gleichgültig, wie gross im Browser des Surfers dargestellt wird. Dies geht simpel mit einem ID-Selektor:
#content { width: 700px; margin: 0 auto;}
Auf der HTML-Seite würde der gesamte Inhalt mit folgendem Div-Tag umschlossen:
<div id=»content»>
Resultat: Eine Webseite mit zentriertem Inhaltsblock, die vom Internet Explorer in der Version 5.0 und älter nicht korrekt angezeigt wird: Er ignoriert den Versuch, Elemente über CSS zu zentrieren. Damit auch dieser Browser eine korrekte Darstellung liefert, ist folgende Anpassung der Stile nötig:
body {text-align: center;} #content {text-align: left; width: 700px; margin: 0 auto; }