CSS
Box horizontal zentrieren
- Details
- Zuletzt aktualisiert am Donnerstag, 10. September 2009 20:43
Container oder Box zentrieren
Um eine Box mittig zum übergeordneten Objekt auszurichten sind mir zwei unterschiedliche CSS Formatierungsmöglichkeiten bekannt.
Eine Möglichkeit besteht darin, die Rechten und Linken Rand auf AUTO zu setzen. Das funktioniert recht gut in den meisten Browsern mit CSS2 Unterstützung. Zwingend erforderlich ist die Angabe eines Wertes für die Breite (width)
#inhalt { width:720px; margin:0px auto; }
Problematisch ist der IE5 / WIN. Hier muss man Hilfe in einem Workaround suchen. Die Eigenschaft TEXT-ALIGN:center; vererbt sich zu den enthaltenen BOX-Elementen.
body { margin:0px; padding:0px; text-align:center; }
Weitere Infos: http://bluerobot.com/web/css/center1.html
Eine zweite Möglichkeit besteht in der Verwendung von negativen Rändern. Hierbei handelt es sich um eine Verbindung aus fester Positionierung und einem negativen (z.B. margin-left) Randwert. Es wird ein Container erstellt. Die Positionierung erfolgt ABSOLUTE. Ein Abstand zum linken Rand (LEFT) wird angegeben mit dem Wert 50%. Abschließend wird der linke Rand (margin-left) auf die Hälfte der Breite des zu zentrierenden Elements gesetzt.
#container { position: absolute; left:50%; width:600px; margin-left:300px; }
Da es sich bei dieser Variante um KEINEN Hack handelt, ist die Unterstützung der Browser relativ hoch. Selbst der Netscape Navigator 4.x, sonst eher ein Problemfall, unterstützt diese Methode.
Weitere Infos: http://bluerobot.com/web/css/center2.html
