nicht angemeldet
Netscape div center geht nicht?
Sagt mal, warum kann ich denn mit 'nem <div style="text-align:center"> keine Tabelle (innerhalb von <body>) zentrieren? IE macht's. Netscape nicht.
-
Sagt mal, warum kann ich denn mit 'nem <div style="text-align:center"> keine Tabelle (innerhalb von <body>) zentrieren? IE macht's. Netscape nicht.
Heyho,
dafür gibt es extra Attribute:
margin-left: auto; margin-right: auto;
Dann funktioniert es auch mit netscape
gruß,
finnsen
-
funktioniert leider nicht.
<body style="background-color:#8C8CBA;text-color:#000000;text-align:center;vertical-align:middle;margin-left:auto;margin-right:auto">
Im <div> geht's auch nicht.
-
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
-
Moin Sven,
vielen Dank. Ich versuche es mal mit meinen Worten. IE baut Shit! Wenn ich also eine Tabelle, ein Blockelement, zentrieren will, dann muss ich das der Tabelle stecken und NICHT dem übergeordneten Element, gelle?!
<table style="margin-left:auto;margin-right:auto">
Wenn ich Text, ein Inlineelement, zentriert darstellen will, dann muss ich das dem übergeordneten Element klarmachen. In meinem Fall der Tabelle.
<table style="text-align:center;margin-left:auto;margin-right:auto">
Für IE würde ich dem <body> also noch ein text-align:center mitgeben. Was ich nicht verstehe, sind deine Workarounds und das mit dem Scrollbalken.
-
Moin Sven,
vielen Dank. Ich versuche es mal mit meinen Worten. IE baut Shit! Wenn ich also eine Tabelle, ein Blockelement, zentrieren will, dann muss ich das der Tabelle stecken und NICHT dem übergeordneten Element, gelle?!
<table style="margin-left:auto;margin-right:auto">
Wenn ich Text, ein Inlineelement, zentriert darstellen will, dann muss ich das dem übergeordneten Element klarmachen. In meinem Fall der Tabelle.
<table style="text-align:center;margin-left:auto;margin-right:auto">
Bis hierhin alles richtig.
Für IE würde ich dem <body> also noch ein text-align:center mitgeben. Was ich nicht verstehe, sind deine Workarounds und das mit dem Scrollbalken.
Da man mit text-align eigentlich keine Blockelemente zentrieren kann, ist es ein Workaround, wenn man es trotzdem tun (und es auch funktioniert). Wenn du <body> text-zentrierst, dann gilt das auch für alle Unterelemente - und das ist sicherlich nicht erwünscht, wenn alle Texte zentriert erscheinen, deshalb muss es in der Ebene drunter (hier: die Tabelle) rückgängig gemacht werden.
Die Sache mit dem Scrollbalken ist so zu verstehen: margin:auto setzt gewisse Mechanismen in der Berechnungsformel für die Elementbreite und -position in Gang, damit das Element zentriert wird. Es funktioniert, wenn die Elementbreite definiert ist - der restliche Abstand zwischen Element und umgebendem Element wird zu gleichen Teilen auf den margin aufgeteilt - es zentriert. Das gilt allerdings auch dann, wenn zuwenig Platz für das Element vorhanden ist! Dann werden negative margin-Werte genommen, und deine Tabelle rutscht links und rechts aus dem Browserfenster heraus - ohne dass Scrollbalken entstehen! Dem kann man nur entgegenwirken, indem das umgebende Element (hier: <body>) eine Mindestbreite hat - dann wird ggf. das Browserfenster mit Scrollbalken versehen. Die Mindestbreite sollte so breit sein, wie das zu zentrierende Element breit ist.
Da der IE min-width nicht versteht, wirst du den Effekt in diesem Browser nicht nachvollziehen können. Aber Mozilla und Opera können es dir zeigen.
- Sven Rautenberg
-
-
-
-