Home arrow HTML & CSS arrow CSS: Zentrieren von Blockelementen
CSS: Zentrieren von Blockelementen Drucken E-Mail
Geschrieben von MK   
07.08.2005

Eine Vielzahl von Webseiten wird aktuell mit einer festen Breite der Seite erstellt. Um den unterschiedlichen Bildschirmauflösungen der Nutzer Rechnung zu tragen (Leerraum rechts neben der Seite im Browserfenster), wird die Seite in der Mitte des Bildschirms dargestellt. Um eine Box auf dem Bildschirm zentriert darstellen zu können, wird mit CSS folgendes Format definiert:

#page { width: 760px; margin: 0 auto; }

Mit der Eigenschaft "width: 760px" wird die Breite der Box auf 760 Pixel fixiert. Der Außenabstand wird mit den Werten "0" (für den oberen und unteren Abstand) und "auto" (für den linken und rechten Abstand) notiert. Der Wert "auto" bewirkt eine Zentrierung der Box im Browserfenster. So weit, so gut ... Leider ignoriert der MSIE 5.x die CSS-Eigenschaft für die Zentrierung. Eine Lösung bietet sich durch die Nutzung der Eigenschaft "text-align" an. Dem HTML-Element "body" (Elternelement von "#page") wird diese Eigenschaft mit dem Wert "center" zugeordnet. Um den Inhalt in der Box wieder am linken Rand auszurichten, muss dem Box-Bereich die gleiche Eigenschaft, aber mit dem Wert "left", hinzugefügt werden:
body { text-align: center; } #page { text-align: left; width: 760px; margin: 0 auto; }

gefunden bei evolt.org

 
< Zurück   Weiter >

Login






Passwort verloren?

Werbung

all-inkl.com webhosting