Box horizontal zentrieren

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

Akku Berechnung 1.6

Akku Leistung





Transfer Calc 1.6

Volumen, Bandbreite zu Zeit






Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.