Wie kann man ein Div-Element/Box in einer Seite via CSS zentrieren?
Mit margin:auto beispielsweise, wenn die Breite des Div-Elementes vordefiniert ist. Wichtig hierbei ist aber dem Div an dieser Stelle eine feste Breite zu zu weisen, da sonst die gesamte Fensterbreite angenommen wird.
In der Praxis kann dies sehr hilfreich sein, wenn man beispielsweise eine schön kompliziert verschachtelte / verwurstete Seite hat und diese um eine vertikal angeordnetes Banner (Skyskraper) ergänzen möchte.
Angenommen der Webseiteninahlt hat eine Breite von 800 Bildpunkten und das Banner 120 Bildpunkte, erstellen wir ein umschliessendes Div 1 mit einer Breite von 920 Bildpunkten, setzen den ursprünlichen Inhalt in Div 1a und das Banner in Div 1b. Der HTML-Code dazu sieht folgendermassen aus.
<pre name=”code” class=”html”>
<body style=”text-align:center”>
<div id=”1″ style=”margin:auto;width:920px;”>
<div id=”1a” style=”text-align:left;width:800px;float:left”></div>
<div id=”1b” style=”text-align:left;float:right;width:120px;”></div>
</div>
</body>
</pre>
Im Internet Explorer muss im Body-Tag text-align:center gesetzt sein, da dieser margin:auto hier nicht richtig interpretiert und die das Div 1 sonst am linken Seitenrand beginnen würde. Die beiden text-align:left in den Div-Elementen 1a und 1b dienen lediglich dazu, dass das text-align:center sich nicht auf die restlichen Inhalt auswirkt.
Das ganze sieht dann in einer schematischen Darstellung ungefähr so aus.
