Mit CSS zentrieren?

[SHALOM]

Hallo Leutchens!

Sagtmal, wie zentriere ich in CSS eigentlich etwas? Text weiß ich geht mit "text-align:center".
Aber wie zum Beispiel eine Tabelle, oder ein Bild? Das funtkioniert nämlich nicht bei denen.

Danke schon jetzt²³

[DG]

Hallo.

Du musst den Unterschied zwischen Blockelementen und Inlineelementen kennen. Setze widerspenstige Elemente in einen Behälter, sagen wir mal div, und weise diesem text-align zu.

[SHALOM]

Habe ich alles schon gemacht. Probiers mal mit dem Mozilla, da läufts net. Und da der sich ja eigentlich komplett an die Regeln hält, denke ich, dass der IE und andere die eine Tabelle mit text-align zentrieren es falsch machen, oder?

[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...