DIV Container zentrieren mit CSS
29. März 2008
Irgendwann einmal hatte ich enorme Probleme einen div container mittig auf einer Seite zu zentrieren und zwar so, dass das auf allen Browsern gleich aussieht und ohne ein text-align: center; zu benutzen, da dieses sich auf weitere Container und somit den darin enthaltenen Text vererbt. Also war nach etwas Suche eine Lösung gefunden die ich seitdem immer benutze (z.b. auch hier auf penthouse-sozialismus.com)
Man nehme also folgendes:
Der DIV Container wird zuerst absolut mit 50% Abstand vom linken Bildschirmrand positioniert. Jetzt steht allerdings der linke Rand des Containers in der Mitte.
Was tun? ->Wir geben die Gesamtbreite des Containers an (width: 800px) und versetzen den Ganzen dann um die Hälfte seiner Breite nach links (margin-left: -400px;)
That’s it =)
Danach kann man natürlich noch definieren wie man lusitg ist, background, etc..
Und so könnte das Ganze dann aussehen:
#maincontainer {
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
}
Tags: css, tips, webdesign, Website
