Einen DIV-Bereich zentrieren
In normalem HTML konnte man einen Bereich ganz einfach mit align="center" mittig ausrichten. Was aber, wenn die Seite XHTML-konform sein soll? Dann muss auf CSS und text-align: center zurückgegriffen werden, das aber nur innerhalb von Block-Elementen wie -Bereichen, Absätzen und Tabellen gilt. Um ein -Element selbst zu zentrieren, setzt man in Browsern, die CSS korrekt verarbeiten können, dessen margin auf auto:
In normalem HTML konnte man einen Bereich ganz einfach mit align="center" mittig ausrichten. Was aber, wenn die Seite XHTML-konform sein soll? Dann muss auf CSS und text-align: center zurückgegriffen werden, das aber nur innerhalb von Block-Elementen wie <div>-Bereichen, Absätzen und Tabellen gilt. Um ein <div>-Element selbst zu zentrieren, setzt man in Browsern, die CSS korrekt verarbeiten können, dessen margin auf auto:
<div.style="width:250px; margin:0px auto"> Hallo, Welt! </div>
Moderne Browser können diese Syntax verarbeiten. Bei älteren Browsern muss allerdings etwas getrickst werden. Dort kann der zu zentrierende Bereich in einen übergeordneten eingebettet werden:
<div.style="text-align: center"> <div.style="width: 250px; margin: 0px auto"> Hallo, Welt! </div> </div>
Zu beachten ist dabei, dass text-align:.center auf alle untergeordneten Elemente vererbt wird. Will man die Zentrierung für einzelne Elemente aufheben, müssen diese etwa mit text-align:.left ausgerichtet werden.
