Kategorien
Stylesheets

Box horizontal zentrieren

CSS Programming Image

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; }

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.

Von Michael

wohnhaft in München
arbeite bei der Landeshauptstadt München

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert