Wie lässt sich eine Webseite horizontal zentrieren ?

Nun, da in einigen Foren immer mal wieder die Frage gestellt wird, wie sich eine Webseite zentrieren lässt, folgt eine kleine Anleitung zu diesem Thema. Aber bevor es los geht folgt erst einmal das Markup.

HTML-Markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

<head>
   <title>Website zentrieren</title>
   <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
</head>

<body>
 <div id="container">
  <div id="header"><h1>Zentrierte Webseite</h1></div>
   <div id="content">....</div>
 </div> 
</body>
</html>	

Da es nur um das Zentrieren einer Webseite geht, sollte hier ein Einspalten-Layout völlig ausreichen.

Um eine Webseite zu zentrieren, wird ein umspannendes DIV Element benötigt, welches eine feste Breite mit width zugewiesen wird. Nur so ist margin in der Lage den linken und rechten Außenabstand zu berechnen. Glücklicherweise funktioniert hier Angabe margin:0 auto;, wobei der erste Wert 0 für den oberen und unteren Außenabstand und der zweite Wert auto für den linken und rechten Außenabstand steht. Übrigens handelt es sich hierbei um die Kurzschreibweise von margin. In den nun folgenden Style-Angaben werde ich zum besseren Verständnis die ausführliche Schreibweise benutzen.

Style-Angeben

 * {       /* Außen- Innenabstände global zurücksetzen */
 margin:0;
 padding:0;
}

body {
 font: 100.01% tahoma , arial,helvetica, sans-serif;
}

#container {
 width:960px;
 margin-top:0;
 margin-bottom:0;
 margin-left:auto;
 margin-right:auto;
 background-color:#fff;
}

#header {
 margin:0 10px;
 padding:20px;
 background-color:#09c;
 text-align:center;
}

#content {
 margin:10px 10px 0 10px;
 background-color:#ddd;
}

Beispielseite

Wie ihr nun erfahren habt, ist es also überhaupt kein Problem, seine Webseite sprichwörtlich in den Mittelpunkt zu stellen. Nun wünsche ich euch viel Spaß beim Nachbasteln.

erstellt am 16.10.2011

nach oben