Horizontale und vertikale Zentrierung in XHTML StrictDas Attribut 'align' ist vom W3C als deprecated (missbilligt) eingestuft und im aktuellen XHTML Strict nicht mehr zulässig. Die bisher übliche Anweisung <div align="center"> zur horizontalen Zentrierung muß also ersetzt werden.
Die horizontale Zentrierung von Inline-Elemenen und Text in Paragraphen ist einfach:
Dieser Text ist zentriert.
<p style="text-align:center;">Dieser Text ist zentriert.</p>
Block-Elemente wie z.B. <div> oder Tabellen werden zentriert, indem man ihre linken und rechten Abstände gleich groß definiert, wozu man den Wert 'auto' verwenden kann:
Dieser Block sollte zentriert sein.
<div style="margin:auto; width:250px; padding:10px; border: 1px solid black;">
<p>Dieser Block sollte zentriert sein.</p>
</div>
Dieser Block wurde bei Ihnen nicht zentriert angezeigt? Dann verwenden Sie einen Browser, der sich nicht an den CSS-Standard hält - vermutlich den Internet Explorer (der diese Anweisung ab Version 6 zwar kennt, aber nur im standardkonformen Modus auch umsetzt). Um diesen Browser unabhängig von der Version oder dem Modus zur Zentrierung eines Blocklevel-Elements zu veranlassen, nutzen wir einen weiteren Fehler von ihm aus; er wendet nämlich das ausschließlich für Inline-Elemente zuständige Attribut 'text-align' auch auf enthaltene Blocklevel-Elemente an.
Hierdurch werden jedoch ebenfalls alle Inline-Elemente zentriert. Um nun z.B. die Blocklevel-Elemente <div> und <table> für alle Browser zu zentrieren, Texte in den Inline-Elementen <p> und in Tabellen jedoch weiterhin linksbündig ausgerichtet zu lassen, setzen wir die folgenden Style-Angaben zwischen <head> und <body>:
<style type="text/css">
body { text-align:center; }
div,table { margin-left:auto; margin-right:auto; }
p,th,td { text-align:left; }
</style>
Die vertikale Zentrierung einer Textzeile ist einfach, wenn auch wegen der hierzu zweckentfremdeten CSS-Eigenschaft line-height nicht allgemein bekannt:
vertikal (und horizontal) zentrierter Text
<p style="line-height:5em; text-align:center; border:1px solid black;">Text</p>
Blocklevel-Elemente sind schwieriger vertikal zu zentrieren, da margin:auto bei der Höhe dem Initialwert des Elements entspricht. Soweit jedoch die Höhe des Elements und seines umschließenden Elements bekannt sind, können die hierzu passenden margins angegeben werden:
zentrierter Absatz
<div style="width:300px; height:80px; border:1px solid blue;">
<p style="width:250px; height:30px; margin:24px; border:1px margin:20px; border:5px solid black;">
zentrierter Absatz</p>
</div>
Einen Haken hat diese Methode allerdings: der Internet Explorer zieht die Rahmenbreite im „quirks mode“ fälschlich von der Größe der inneren Box ab, so daß die Zentrierung nicht ganz stimmt. Dies wird allerdings erst bei breiterem Rahmen sichtbar; testen Sie 5px im IE 6.
Eine ganze Seite sollte man nur dann innerhalb eines zentrierten Rahmens darstellen, wenn hierdurch keine seiteninternen Scrollbalken provoziert werden. Eine mögliche Anwendung wäre z.B. eine Startseite mit einem begrenzten Inhalt:
<style type="text/css">
@media screen, projection {
html, body { height:100%; margin:0; padding:0; }
#seite { height:80%; width:90%; position:absolute; top:10%; left:5%; }
}
</style>
...
<div id="seite">Seiteninhalt</div>
Eine solche Definition ist meist nicht drucktauglich und sollte daher wie hier auch nur für die Bildschirmdarstellung gegeben werden.
Um ein Element mit festen Dimensionen wie z.B. mein Foto auf dieser Seite zentrieren zu können, ist absolute Positionierung erforderlich. Hierbei wird die obere linke Ecke des Elements in der Mitte positioniert und das Element über negative margins um die Hälfte seiner Breite nach links und die Hälfte seiner Höhe nach oben verschoben:
<style type="text/css">
#Foto {
position:absolute; top:50%; left:50%;
margin-top:-100px; margin-left:-110px;
width:200px; height:220px;
}
</style>