27.12.2007

Eine Seite horizontal zentrieren

Voraussetzung ist, dass die Seite (div) eine bestimmte Breite hat. Dies kann sowohl ein Pixelwert (z.B. 700px) als auch ein Prozentwert (z.B. 80%) sein.
Um ein einheitliches Browserverhalten zu gewährleisten sollte der Body folgende Angaben enthalten:

body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
}

Den Container, den es innerhalb des Body zu zentrieren gilt, nennen wir #center.
Folgende Angaben bewirken seine horizontale Zentrierung:

#center
{
width: 700px;
border: 1px solid blue;
margin: 30px auto;
}

Der erste Margin-Wert gibt den oberen und unteren Abstand an. Falls kein Abstand erwünscht ist, auf "0" setzen.
Der zweite Wert bewirkt den automatischen Abstand von linken und rechten Body-Rand.

Daraus folgt der HTML-Code:

<body>
<div id="center">
<p>
Ich bin ein horizontal zentrierter Container.
Falls keine Höhenangabe definiert ist, wächst meine Länge mit dem Inhalt.
</p>
</div>
</body>

Beispiel ansehen

Eine horizontale Seitenzentrierung ist aber auch ohne einen allumfassenden Div möglich uns lässt sich ebenso über den body erreichen. Wie dies funktioniert ist hier erklärt.

Problemfall Internetexplorer

Ihr habt alles richtig gemacht und dennoch wird die Seite im IE nicht zentriert dargestellt?
Dann liegt es mit ziemlicher Sicherheit am fehlenden oder fehlerhaften DOCTYPE. Das ist die Angabe, die an allererster Stelle im Quelltext einer Seite stehen sollte und den Browsern angibt, nach welchen Regeln die Seite gecodet ist und wie sie diesen Code zu interpretieren haben.

Damit auch der IE eine Seite zentriert, benötigt er einen "qualifizierten Doctype" wie z.B. diesen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Fügt das also unbedingt ganz an den Anfang eurer Seite ein. Weitergehende Infos findet ihr hier.

nach oben