Finde uns auf facebook.com Finde uns bei twitter Finde uns bei google+
dartpfeil

CSS Div-Container ohne Breitenangabe zentrieren


Heute gibt’s mal wieder was aus dem Bereich CSS. Wer kennt das nicht, man hat einen Div-Container, der zentriert werden soll. Eigentlich nicht sonderlich schwer. Hier reichen die Angaben margin: auto und eine feste Breite. Bei einem einfachen Text funktioniert es natürlich noch einfacher mit einem text-align: center. Schwieriger wird es allerdings, wenn es ein Div-Container sein soll, bei dem die Breite variabel bleiben muss. In so einem Fall funktioniert das zuvor genannte natürlich nicht. Aber auch für diesen Fall gibt es eine saubere Lösung in CSS.

 

Zunächst mal brauchen wir einen Div-Container welcher einen float besitzt. In diesem Container brauchen wir einen weiteren Div-Container, welcher anschließend mittig ausgerichtet wird. Und jetzt zu dem eigentlichen CSS-Trick. Der erste Container bekommt einen Abstand von Links mit 50%. Somit ist der Container natürlich nicht mittig, sondern die linke Kante ist bündig mit dem Mittelpunkt der Seite. Der zweite, innere Container, bekommt nun einen Linken Abstand von -50%, somit springt er aus dem übergeordneten Div heraus und erscheint damit mittig. Wichtig ist hierbei das Minus vor der Abstandsangabe. Das war schon die ganze Logik. Naja, fast. Man muss noch relative Positions-Angaben machen. Den kompletten Code hier ansehen: http://jsfiddle.net/2ZQqm/

 

Bei dieser Lösung werden Floats benutzt, daher gilt, wer Floatet muss auch clearen!

Keine Kommentare zu: CSS Div-Container ohne Breitenangabe zentrieren

Hinterlasse eine Antwort

Pflichtfelder sind mit einem * markiert.