Falls der Internet Explorer die Angabe margin: auto; zum Zentrieren von DIV-Containern nicht befolgt, dann hilft dieser Trick:
#container { position: relative; width: 600px; left: 50%; margin-left: -300px; }
Mit left: 50%; wird der Container um 50% des Anzeigebereichs nach rechts verschoben. Das ist etwas zu viel, deshalb muss man die halbe Breite bei margin-left angeben, um die Verschiebung auszugleichen und das DIV mittig zu positionieren.
Es gibt viele Möglichkeiten, um über eine CSS-Datei einen div-Container mittig auf einer Webseite auszurichten.
Hier einige Beispiele:
1 2 3 4 5 | #mittig { margin-left: auto; margin-right: auto; } |
+ Funktioniert sehr gut im Firefox 3.5
+ Funktioniert sehr gut mit variablen Breiten
- Harmoniert nicht mit Internet Explorer 8
1 2 3 4 | #mittig { margin: 0 auto; } |
+ Funktioniert sehr gut im Firefox 3.5
+ Funktioniert sehr gut mit variablen Breiten
- Harmoniert nicht mit Internet Explorer 8
1 2 3 4 5 6 7 | #mittig { left: 50%; width: 500px; margin-left: -250px; position: relative; } |
+ Funktioniert mit Firefox 3.5
+ Funktioniert mit Internet Explorer 8
- nicht vorteilhaft für flexible Layouts
- Harmoniert wegen der negativen Abstände nicht mit IE6

1