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:
<html> <body> <div id="container" style="width:100%; height:100%; background-color:red;"> <div id="contained" style="width:50%; height:50%; background-color:green;"> <p>Ich will zentriert werden</p> </div> </div> </body> </html>
Der äußere DIV wird das ganze Fenster füllen und der innere DIV die obere linke Ecke:
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:
<html>
<head>
<style>
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
</style>
</head>
<body>
<div id="container" style="width:100%; height:100%; background-color:red;">
<div id="contained" style="width:50%; height:50%; background-color:green;">
<p>Ich will zentriert werden</p>
</div>
</div>
</body>
</html>
Dann sieht es so aus:
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