Navigation überspringen

Browser ignorieren text-align, oder: »margin:auto; im Internet Explorer«

Problem:
Es soll ein Block-Level-Element wie zum Beispiel eine Tabelle, ein 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.
Unterschiede durch DOCTYPE-Switch in:
Internet Explorer [1]
Ursache:
Die CSS-Eigenschaft 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.
Lösungen und Beispiele:

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.

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>
Sonstiges:

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.

Literatur:

Letzte Änderung des Inhaltes: 23.08.04