text-align
,
oder: »margin:auto;
im Internet Explorer«
div
-Bereich oder ähnliches mit CSS auf der Seite horizontal ausgerichtet werden. Im Internet Explorer kann dies durch die CSS-Eigenschaft text-align
für ein umgebendes Element erreicht werden. Andere Browser ignorieren dies aber.text-align
dient nur zur Ausrichtung von »Inline-Inhalt« eines Block-Level-Elements. Das sind zum Beispiel der Textfluss oder Graphiken innerhalb eines Absatzes oder einer Tabellenzelle. Block-Level-Elemente selbst wie zum Beispiel Tabellen, div
-Bereiche oder Absätze können damit nicht ausgerichtet werden. Das Problem liegt also bei der fehlerhaften Interpretation von text-align
durch den Internet Explorer.Die horizontale Ausrichtung eines Block-Level-Elements ergibt sich durch das CSS-Box-Modell. Dabei gilt die folgende »Gleichung«:
margin-left
+ border-left-width
+ padding-left
+ width
+ padding-right
+ border-right-width
+ margin-right
= Breite des übergeordneten Elementes
Wird sowohl margin-left
als auch margin-right
der Wert auto
zugewiesen, so sind die berechneten Werte für beide Seitenränder gleich groß. Das Block-Level-Element wird zentriert.
margin:auto;
im Quirks Modemargin:auto;
im Standards Mode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>DOCTYPE-Switch: Browser ignorieren text-align</title>
<style type="text/css">
p.marginauto {
margin-left:auto;
margin-right:auto;
width:75%;
background-color:#fcfcfc;
border:dotted 1px #009;
padding:1em;
}
</style>
</head>
<body>
<p class="marginauto">Inhalt des Absatzes</p>
</body>
</html>
Der Internet Explorer 6 für Windows beherrscht diese korrekte Methode zur horizontalen Ausrichtung eines Block-Level-Elements nur im Standards Mode. Ältere Versionen des Internet Explorers ignorieren diese Lösung. Um auch in diesen Browsern eine Zentrierung eines Block-Level-Elements zu erreichen, muss die falsche Interpretation von text-align
ausgenutzt werden. Dazu wird einem umgebenden Element mit text-align
die gewünschte Ausrichtung zugewiesen. Da in standardkonformen Browsern der Wert für text-align
weiter vererbt wird, wird nun Inline-Inhalt des auszurichtenden Elements selbst entsprechend ausgerichtet. Daher muss mit einem weiteren text-align
im Element selbst die Textausrichtung bestimmt werden.
Kombination von margin:auto
und text-align:center
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>DOCTYPE-Switch: Browser ignorieren text-align</title>
<style type="text/css">
div.container {
text-align:center;
}
p.marginauto {
margin-left:auto;
margin-right:auto;
text-align:left;
width:75%;
background-color:#fcfcfc;
border:dotted 1px #009;
padding:1em;
}
</style>
</head>
<body>
<div class="container">
<p class="marginauto">Inhalt des Absatzes</p>
</div>
</body>
</html>
Der Darstellungsmodus hat nur Auswirkung auf die korrekte Interpretation von margin:auto
im Internet Explorer 6 für Windows. Die fehlerhafte Interpretation von text-align
ist nicht davon betroffen.
Letzte Änderung des Inhaltes: 23.08.04