Elemente mit CSS zentrieren
Tabellen und andere Elemente lassen sich natürlich auch per
CSS zentrieren.
Vielleicht ist Dir aber schon mal aufgefallen, daß
text-align:center gar nicht funktioniert; zumindest
nicht in Firefox und ähnlichen Browsern, von denen alle immer
behaupten, sie wären so gut. Was ist also das Geheimnis des
horizontalen Zentrierens (und von Firefox)?
Die Antwort ist einfach: text-align:center soll
nur Text zentrieren, also die Buchstaben innerhalb eines
Absatzes, nicht den Absatz selbst (der Internet Explorer verhält
sich hier falsch und zentriert beliebige Elemente mit
text-align:center). Am besten verdeutlicht sich das
an einem Beispiel:
Ich bin ein linksbündiger Absatz der Breite 20em. Mein Inhalt aber ist zentriert. An mir siehst Du also, daß die Ausrichtung des Inhaltes (Text) eigentlich nichts mit der Ausrichtung des Containers (Absatz, Tabelle, sonstiges block-Element) zu tun hat.
Dazu der Quellcode (die für die Zentrierung verantwortlichen Teile sind hervorgehoben):
<p style="text-align:center; width:18em; border:1px solid #000; padding:1em; background-color:#e4f3fe;">Ich bin ein linksbündiger Absatz der Breite 20em. Mein <em>Inhalt</em> aber ist zentriert. An mir siehst Du also, daß die Ausrichtung des Inhaltes (Text) eigentlich nichts mit der Ausrichtung des Containers (Absatz, Tabelle, sonstiges <span lang="en">block</span>-Element) zu tun hat.</p>
Zusammen mit dem Text werden dann natürlich weitere
inline-Elemente (a,
em, strong, code,
span und mehr) zentriert.
Wie aber soll ein Absatz und andere
block-Elemente selbst zentriert werden?
Also z. B. p, h3, table,
pre, address, div usw.
Wieder ein Beispiel:
Ich bin ein zentrierter Absatz der Breite 20em. Mein Inhalt; aber ist rechtsbündig. Auch an mir siehst Du wieder, daß die Ausrichtung des Inhaltes eigentlich nichts mit der Ausrichtung des Containers zu tun hat.
Dazu der Quellcode:
<p style="margin-left:auto; margin-right:auto; width:18em; border:1px solid #000; padding:1em; background-color:#e4f3fe; text-align:right;">Ich bin ein zentrierter Absatz der Breite 20em. Mein <em>Inhalt</em> aber ist rechtsbündig. Auch an mir siehst Du wieder, daß die Ausrichtung des Inhaltes eigentlich nichts mit der Ausrichtung des Containers zu tun hat.</p>
Die Zentrierung per CSS soll also mittels margin-left:auto;
margin-right:auto; geschehen; das bedeutet ganz einfach:
Linker und rechter Abstand sollen gleich groß sein, aber zugleich
automatisch bestimmt werden. Dadurch wird ein Element natürlich
immer zentriert.
Das letzte Beispiel funktioniert wunderbar auch im Internet Explorer
6 – aber nicht in älteren Versionen. Wir erinnern uns: Die
älteren Versionen haben allesamt den Fehler, daß sie auch
block-Elemente per
text-align:center zentrieren. Diesen Fehler können
wir nun ausnutzen. Wieder ein Beispiel:
Ich bin ein zentrierter Absatz der Breite 20em. Mein Inhalt aber ist linksbündig. Im Gegensatz zu meinem Vorgänger werde ich auch vom Internet Explorer 5.x korrekt angezeigt.
Dazu der Quellcode:
<div style="text-align:center;"> <p style="margin-left:auto; margin-right:auto; width:18em; border:1px solid #000; padding:1em; background-color:#e4f3fe; text-align:left;">Ich bin ein zentrierter Absatz der Breite 20em. Mein <em>Inhalt</em> aber ist linksbündig. Im Gegensatz zu meinem Vorgänger werde ich auch vom Internet Explorer 5.x korrekt angezeigt.</p> </div>
Der Trick ist folgender: Für alle moderneren Browser wurden die
Angaben wie beim vorherigen Beispiel gewählt – es wird der Absatz
also mit margin-left:auto; margin-right:auto; zentriert.
Für ältere Internet Explorer aber wurde im Elternelement
des Absatzes text-align:center angegeben. Hier wurde als
zusätzliches Elternelement ein umschließendes div eingebaut,
dies kann aber auch ebensogut body oder ein beliebiges
anderes Element sein, das bereits existiert! Ein div ist
kein Zaubermittel!
Nun gibt es noch ein Problem: Durch text-align:center im
Elternelement wird auch der gesamte Text innerhalb des Absatzes zentriert
(wie beim ersten Beispiel) – das möchte man häufig gar nicht. Dieser
Effekt betrifft übrigens alle Browser, nicht nur die älteren Internet
Explorer, für die wir text-align:center extra eingefügt
haben. Um dieses Problem zu lösen, wurde im Absatz selbst wieder eine
Textausrichtung vorgegeben – hier als Beispiel
text-align:left.
Natürlich sollten die Formatierungen besser als externes style sheet eingebunden werden.
Viel Spaß!