Um den Inhalt einer Website zu zentrieren, also mittig darzustellen, gibt es verschiedene Wege. Ohne Tables einzusetzen haben sich folgende Lösungen bewährt.
Aufgabe Wir haben eine Website mit einer Breite von 900 Pixeln und wollen diese 900 Pixel jetzt mittig ausrichten. Wird das Browserfenster in seiner Größe verändert soll die Website sich dementsprechend auf der Fläche verschieben.
Lösung 1 (empfohlen) Die erste Variante ist genauso einfach wie genial. Es wird dem Body-Tag gesagt, er soll die Inhalte zentriert darstellen. Das alleine reicht allerdings noch nicht, damit das DIV sich auch daran richtet muss es den Wert "margin:auto" bekommen. Das sieht dann so aus:
Innerhalb des DIVs für die Website sagen wir dann wieder "text-align:left", damit die Inhalte darin nicht zentriert dargestellt werden. Ist die Browserfläche kleiner als 900 Pixel wird ein horizontaler Scrollbalken angezeigt, genauso wie man es gewohnt ist.
Lösung 2 Eine weitere Möglichkeit das DIV zentriert ausrichten zu lassen, ist es mit Positionsangaben zu justieren.
Was passiert hier? Mit mit Left-Befehl wird die linke Kante des DIV genau in der Mitte des Bildschirms dargestellt. Wir wollen aber, dass die Mitte des DIVs in der Mitte ist. Deshalb ziehen wir die Hälfte der Breite mit "margin-left" ab. Das Ganze hat nur ein Problem und zwar wenn der Bildschirm kleiner als 900 Pixel ist. Dann gibt es keine Scrollbar und das DIV wird über den linken Rand hinaus angezeigt.
Daher empfehlen wir Lösung 1.
//Nachtrag: Danke an Konstantin Knöll, der eine weitere, sehr gute Lösung eingereicht hat:
* { padding: 0; margin: 0; }
body, html { width: 900px; margin: 0 auto; }
Dieser Lösungsansatz war mir bis dato fremd, klappt aber wirklich ;) Vielen Dank Konstantin.
Kommentare (8)
Letzte Aktualisierung ( Montag, 6. Dezember 2010 )
Kommentare (8)
