Programmierung
Einen div-Container zentrieren
Es ist gar nicht schwer einen <div>-Container zu zentrieren.
Wer Tabellen-Layout vermeiden möchte, der kommt mitunter nicht drumherum, <div>-Container zu zentrieren. Ein schlichtes "align=center" reicht da nicht aus, da es nicht (mehr) valide ist. CSS bietet Abhilfe.
Es ist ja nichts Neues, dass Web-Designer und -Programmierer immer wieder auf Schwierigkeiten stoßen was die Browser-Kompatibilität des Quellcodes anbelangt. Auch bei der Zentrierung von <div>-Containern muß dem Rechnung getragen werden, wenn die Abwärtskompatibilität des Codes wichtig ist.
Der HTML-Teil, recht schlicht gehalten, der Einfachheit halber:
<body>
<div id="feld">ein zentriertes Feld</div>
</body>
Der CSS-Teil:
body { text-align: center; }
#feld {
margin: 0 auto;
text-align: left;
width:200px;
background-color:#999999;
color:#ffffff;
}
text-align: center; wegen der älteren Browser
margin: 0 auto; hier wird zentriert
text-align: left; Text innerhalb des Containers wird links ausgerichtet
width:200px; die Breite des Containers
background-color:#999999; die Hintergrundfarbe des Containers
color:#ffffff; Farbe des Textes
Und das wars schon.
