Tutorial zum zentrieren einer Website mit einfachen CSS-Anweisungen
Unser html-code um eine einfache Box mittig im Browser zu platzieren sieht demnach wie folgt aus:
<body id="body">
<div id="wrapper">
<p>Inhalt in zentriertem div-Container!</p>
</div>
</body>
Um die gewünschte Zentrierung nun zu erreichen schreiben wir folgende CSS-Anweisungen:
#body { text-align:center; }
#wrapper {
margin:0 auto;
border: 1px solid;
width:300px;
height:50px;
text-align:left;
}
Erklärung des Quellcodes
Wir geben dem body eine id (Klasse) damit wir mit CSS darauf Zugriff haben - hier hat unser body also die id namens "body".
text-align:center; schiebt den folgenden div-Container mit der id "wrapper" mittig.
Der div-Container mit der ID "wrapper" bekommt nun per CSS "margin: 0 auto;" zugewiesen. Somit stehen die horizontalen Ränder auf "auto". Das bewirkt wiederum einen gleichen rechten und linken Rand zum Browserfenster hin.
Die Anweisung "border: 1px solid;" ist optional. Ich habe sie lediglich benutzt damit man auch eine Box mit einem Rand sieht, da dieser sonst nicht angezeigt wird.
"width:300px;" ist besonders wichtig und sorgt für die Breite unserer Box. Ist keine Breite angegeben skaliert der Browser unserern div-Container auf 100% der aktuellen Fenstergröße.
"height:50px;" ist eine optionale Angabe und kann natürlich bei Bedarf eingesetzt werden.
"text-align:left;" ist wiederum wichtig. Dies sagt unserem div-Container nämlich, dass der folgende Inhalt linksbündig ausgerichtet werden soll. Ist text-align nicht gegeben wird der Inhalt des div-Containers zentriert.
Kommentar von evilnash | 13.03.2011
Oh Mann - und ich frickel mir einen ab mit irgendwelches display:table Anweisungen - dabei geht das so einfach ^^
Kommentar von P.Eng. | 16.01.2012
Super! Da steckt fundiertes HTML-Wissen und Browser-Erfahrung drin. Danke für die Arbeit.
Peter