Du bist hier::--Horizontales und vertikales Zentrieren eines div-Containers mit CSS

Horizontales und vertikales Zentrieren eines div-Containers mit CSS

Wie kann ich einen div-Container auf meiner Webseite zentrieren? Das Zentrieren eines div-Containers auf der Webseite ist gar nicht so schwer. Folgende Beispiele sollen dies veranschaulichen:

1. Horizontales Zentrieren:

Mit "margin:0px auto;" bestimmt man den Außenabstand des div-containers. Der erste Wert "0px" (= Null Pixel) gibt den Abstand für oben und unten an. Der zweite Wert "auto" gibt den Wert für links und rechts an, hier auto=automatisch, also ohne Angabe einer festen Zahl, das bedeutet, der Wert für links und rechts soll einfach gleich sein. Gleicher Abstand links und rechts bedeutet dabei eben, daß der div-container horizontal zentriert ist.
Problem: Der Internet Explorer 6 (und älter) versteht diese Angaben nicht. Er zentriert mittels "text-align:center;". Dies fügt man bereits im body-tag ein. Damit diese Eigenschaft nicht an alle Elemente weitervererbt wird, fügt man im div-container wieder "text-align:left;" ein.

Quellcode: siehe auf der Beispielseite für horizontale Zentrierung

Will man die ganze Seite horizontal zentrieren, weist man sinnvollerweise die Eigenschaften "margin:0px auto;" gleich dem body-Element zu.
Will man das body-Element von der Umgebung abheben, lässt sich das mittels eines Randes (border) für das body-Element oder mittels einer farblichen Unterscheidung zum html-Element leicht lösen, indem man body und html unterschiedliche Farben zuweist.

2. Horizontales und vertikales Zentrieren, ein Workaround:

Eine vertikale Zentrierung macht nur dann Sinn, wenn man einen Container mit festgelegter Höhe zentrieren will.

1. Der Container bekommt eine feste Höhe und eine feste Breite zugewiesen.

2. Der Container wird absolut positioniert, wobei man der linken obere Ecke des Containers die Position 50% Abstand von oben und 50% Abstand von links zuweist.

3. Man definiert einen negativen linken Außenabstand von der halben Pixelzahl der div-Container-Breite und einen negativen oberen Außenabstand von der halben Pixelzahl der div-Container-Höhe. Hiermit sitzt der Mittelpunkt des div-Containers im Mittelpunkt des Bildschirms. Der div-Container ist nun allseitig zentriert.

4. Damit kein Content über den Containerrand hinausragt (und somit das schöne mittige Design zerstört), fügt man mit "overflow:auto;" für diesen Fall noch Scrollbalken hinzu.

Quellcode:
siehe auf der Beispielseite für horizontale und vertikale Zentrierung

Getestet mit IE6, FF1.5, Opera 9.0 . Neuere Versionen der Browser machen keine Schwierigkeiten.

Viel Spaß beim Basteln.

Von |2018-07-25T14:46:02+00:00August 4th, 2006|Kategorien: Webseiten/HTML|1 Kommentar

Über den Autor:

Hinterlassen Sie einen Kommentar