Moin!
Ich erzähl nochmal die ganze Story.
text-align ist für Text zuständig. Text ist ein Inline-Element innerhalb eines Blockelementes, und es wirkt nach innen (aller enthaltener Text wird ausgerichtet).
Tabellen sind Block-Elemente und lassen sich so nicht ausrichten (dass der IE es dennoch macht, ist falsch und steht in keinem Standard!).
Zum Ausrichten von Block-Elementen wird margin-left:auto; margin-right:auto; verwendet. Allerdings wirkt diese Ausrichtung nach außen! Das Element, welches ausgerichtet werden soll, richtet sich anhand des darüberliegenden Elements aus. Das oberste Element ist <body>, daran richtet sich im Zweifel das enthaltene Element (z.B. die Tabelle) aus.
Und wie kriegt man jetzt beides unter einen Hut (IE bis 5.5 kann die offizielle Ausrichtungsvariante nämlich nicht)?
CSS:
body {
text-align:center; /*Workaround für IE*/
min-width:770px; /* Mindesbreite angeben, sonst erscheinen keine
horizontalen Scrollbalken*/
}
table {
text-align:left; /*Workaround wieder geradebiegen*/
margin-left:auto; /*"Echtes" zentrieren*/
margin-right:auto;
}
HTML:
...
<body>
<table>
...
</table>
</body>
Und schon ist alles zentriert.
Es mag manchmal sinnvoller sein, den kompletten Seiteninhalt stattdessen in ein umschließendes <div> zu packen - einfach die obige Tabellenformatierung auf das DIV übertragen.
- Sven Rautenberg