DIV Container zentrieren mit CSS
29. März 2008 0
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
