Mit CSS zentrieren?

[CarstenP]

Hallo,

die richtige CSS-Variante um Tabellen oder ähnliches zu zentrieren, ist margin:auto;. Dies funktioniert in Mozilla, Opera und IE6 im standards-compliant Mode. Im IE5 und Netscape4 geht dies allerdings nicht.

Es gibt für Dich nun zwei Möglichkeiten:
1.) ignoriere unfähige und/oder veraltete Browser (nicht so schön)
2.) Workaround (umständlicher, aber Nutzerfreundlicher)

hier der Workaround:

• Tabelle für aktuelle Broser zentrieren

table { margin:auto; }

• für ältere Browser um die Tabelle ein div herumlegen
    und dieses zentrieren

div { text-align:center; }

• Bei korrekter Interpretation des Codes wird nun in den
    aktuellen Browsern auch der Tabelleninhalt zentriert.
    Wenn dies nicht gewünscht ist, muß der Tabelleninhalt
    extra wieder linksbündig ausgerichtet werden.

table { margin:auto; text-align:left; }

Um flexibler zu bleiben, würde ich zusätzlich Klassen verwenden.

Zusammenfassung:

im CSS-Code:

div.table { text-align:center; }
div.table table { margin:auto; text-align:left; }

im HTML-Code:

<div class="table">
<table>
[...]
</table>
</div>

Viele Grüße
Carsten

PS: ich meine letztens mal gelesen zu haben, daß man für den Mac-IE etwas ausführlicher werden muß: { margin-left:auto; margin-right:auto; } statt { margin:auto; }, ich finde die Stelle jetzt aber nicht mehr...