DIV zentrieren

Der Grund dafür warum man DIVs mit dem Befehl text-align nicht im Fenster zentrieren kann, erklärt schon der Name des Befehls selbst: TEXT-align. Er ist dafür gedacht den Inline-Content eines Block-Elements zu zentrieren, wie eben Text. DIVs sind aber nun mal kein Inhalt, sondern Container, die Inhalt beinhalten sollen und auch wenn sie selbst Inhalt sein können, nicht als Inhalt betrachtet werden.

Da rühme ich mir den guten alten HTML-Befehl "align", der ganz einfach immer "Ausrichtung" bedeutet hat, egal was für ein Objekt da jetzt welches beinhaltet :P

Nun denn, die einfachste Möglichkeit ein DIV zu zentrieren ist der Befehl "margin" - Außenabstand. Wer sich jetzt denkt: "Toll, darauf selbst auszurechnen wo die Mitte ist, und das mit Pixeln anzugeben wär ich auch so gekommen", möchte ich noch ein bisschen Geduld abverlangen:

Es ist schon richtig, dass man das "ausrechnen" könnte, aber dann würde man nicht ohne JavaScript auskommen, da man ja für jede Auflösung die Abstände anders berechnen müsste. Man kann natürlich jetzt das ganze relativ angeben, mit Prozent zum Beispiel, ist aber gar nicht nötig, denn der langen Rede kurzer Sinn:

margin: auto;

Da wird an allen Seiten der übrige Abstand zum Fenster gleichmäßig verteilt, was zwingend bedeutet, dass unser DIV zentriert wird :)

Das funzt übrigens nur, wenn das DIV eine CSS-Breitenangabe mit "width" erhalten hat, da ansonsten ein DIV ja immer 100% breit ist und da gibt es keinen Außenabstand mehr den man verteilen könnte.

Kommentare

unkie
unkie am Donnerstag, 25. Januar 2007 um 16:40

Eine andere Moeglichkeite waere die Angabe von Prozent werten :))
Btw: Du ... xD :P Wollte auch ein Tutorial ueber positionieren mit CSS schreiben, aber das kannst du ja machen :P

Markus René Einicher
Markus René Einicher am Donnerstag, 25. Januar 2007 um 16:42

Hab ich eh gschrieben:
Man kann natürlich jetzt das ganze relativ angeben, mit Prozent zum Beispiel

Patrick Knöbel am Donnerstag, 29. Januar 2009 um 13:53

Danke!

Ein guter Tip für Anfänger im Bereich CSS!

glg