WMP Webstandards

Horizontal Zentrieren - Teil 1

zurück zur Übersicht

Nach oben

Webseite horizontal Zentrieren (Teil 1)

Eine Möglichkeit, um eine Webseite horizontal zu zentrieren, ist, einen <div> mit einer id (hier: "container") um den gesamten Inhalt der Seite zu machen:

...
<body>
  <div id="container">
    <!-- alle anderen Elemente der Seite -->
  </div>
</body>
...

Folgendes CSS sorgt für die Zentrierung:

body
{
  text-align center;
}
#container
{
  width 100px;
  text-align left;
  margin 0 auto
}

Erklärung:

Im <body> wird der Text zentriert. Die <div> muss eine feste Breite haben (hier: 100px) und einen automatischen seitlichen Aussenabstand (margin). Da der Text im <body> zentriert ist, wird es vom <div> vererbt. Also macht man im <div> den Text wieder linksbündig.

Kommentare







29.06.2005 Löschen

Koka

Kann es sein, dass das im Firefox nicht klappt?

29.06.2005 Löschen

Paul

Nein ;)

16.06.2006 Löschen

Odeon

Bei mir funktionierts auch nur im IE aber nich in FF

13.09.2006 Löschen

ebenso

das selbe hier, ich hatte das aber schon mal zentriert im ff ...

08.04.2007 Löschen

damienk

Diese Art der Zentrierung kann ggf. zu Fehlern führen, da text-align nur für die Ausrichtung von inline Elementen vorgesehen ist.

Von paul. Letzte Änderung am 10.06.2005