Workshop Internet-Präsenz

Zentriertes block-Element - Cascading Style Sheets

Nachfolgendes Beispiel zeigt die Möglichkeit, Tabellen und block-Elemente zentriert darzustellen. Dazu müssen der linke und rechte Randbereich den Wert auto erhalten. Z.B.

  margin: 1em auto;
Zelle 1 Zelle 2

Es kann gelegentlich beim Internet Explorer 5 und 6 vorkommen, dass dennoch keine Zentrierung erfolgt. Es hilft dann, dass das übergeordnete Element die Textausrichtung zentriert erhält. Häufig gelingt das erst, wenn ein weiteres div-Tag zum Umschließen eingefügt wird. Es hilft aber auch sinngemäß folgende Ergänzung:

  body {
     text-align: center;
  }

  body * {
     text-align: left;
  }

Die zweite Anweisung sorgt dafür, dass alle im body-Tag eingebetteten Tags die Ausrichtung linksbündig, also nicht zentriert, erhalten. Die beiden Anweisungen sollten am Anfang notiert werden, um spätere Modifikationen der Textausrichtung nicht zu überschreiben.