Benny's Blog
Navigation: Home » Archives for mittig
17. Juli 2010

Falls der Internet Explorer die Angabe margin: auto; zum Zentrieren von DIV-Containern nicht befolgt, dann hilft dieser Trick:

#container
{
	position: relative;
	width: 600px;
	left: 50%;
	margin-left: -300px;
}

Mit left: 50%; wird der Container um 50% des Anzeigebereichs nach rechts verschoben. Das ist etwas zu viel, deshalb muss man die halbe Breite bei margin-left angeben, um die Verschiebung auszugleichen und das DIV mittig zu positionieren.

15. Februar 2010

Es gibt viele Möglichkeiten, um über eine CSS-Datei einen div-Container mittig auf einer Webseite auszurichten.

Hier einige Beispiele:

1
2
3
4
5
#mittig
{
	margin-left: auto;
	margin-right: auto;
}

+ Funktioniert sehr gut im Firefox 3.5
+ Funktioniert sehr gut mit variablen Breiten
- Harmoniert nicht mit Internet Explorer 8

1
2
3
4
#mittig
{
	margin: 0 auto;
}

+ Funktioniert sehr gut im Firefox 3.5
+ Funktioniert sehr gut mit variablen Breiten
- Harmoniert nicht mit Internet Explorer 8

1
2
3
4
5
6
7
#mittig
{
	left: 50%;
	width: 500px;
	margin-left: -250px;
	position: relative;
}

+ Funktioniert mit Firefox 3.5
+ Funktioniert mit Internet Explorer 8
- nicht vorteilhaft für flexible Layouts
- Harmoniert wegen der negativen Abstände nicht mit IE6