Variabler Breite DIVs mit CSS horizontal zentrieren

Um DIVs mit einer festen Breite horizontal zu zentrieren, kann man sie entweder absolut positionieren oder eine negative Marge setzen. Alternativ, kann man auch solche DIVs mit fester Breite zentrieren indem man beide ihre linke und rechte Marge auf „auto“ setzt. Der Browser wird dann beiden Margen dieselbe breite vergeben.

Leider funktionieren beide Varianten oben bei DIVs mit einer variablen Breite nicht. Für solche Fällen wird eine andere Lösung gebraucht.

Angenommen, man hat einen äußeren DIV der einen anderen DIV enthält:

Der äußere DIV wird das ganze Fenster füllen und der innere DIV die obere linke Ecke:

DIV nicht zentriert

Der Trick um den inneren DIV zu zentrieren, ist die Text-Ausrichtung beim äußeren DIV auf zentriert zu setzen während die Display-Eigenschaft vom inneren DIV auf inline-block gesetzt wird. Natürlich wird die Text-Ausrichtung vom äußeren DIV auch vom inneren DIV geerbt. Deswegen muss sie beim inneren DIV zurückgesetzt werden:

Dann sieht es so aus:

DIV zentriert

Diese Technik ist eine gute Alternative zur JavaScript-Lösung, wo man die Breite vom DIV ermittelt und die Margen entsprechend setzt. Falls Sie trotzdem Interesse an der jQuery-Lösung, siehe das Blog von Manos Malihutsakis.

15. April 2014

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.