Supportnet / Forum / Webseiten/HTML
Wie richte ich eine Tabelle zentrisch aus?
Frage
Hi,
wie kann ich eine Tabelle zentrisch nach allen Seiten mit CSS auf einer HTML-Seite unabhängig von der angezeigten Seitengröße ausrichten?
Das horizontale Ausrichten ist kein Problem, nur das vertikale Ausrichten funktioniert nicht. Ich habe schon bei SelfHTML nachgeschaut, konnte aber nichts funktionierentes finden.
Danke für eure Hilfe!
Antwort 1 von rfb
so kannst du ein Element im body zentrieren:
<body style="height:100%;width:auto;text-align:center">
<div style="margin-left:auto;margin-right:auto;position:relative;top:20%;height:60%;width:40%;border:10px solid red;">
voll in der Mitte
</div>
</body>
Antwort 2 von Dixi
Hi,
@rfb:
Danke für das Beispiel, nur leider sitzt das Feld am unteren Bildschirmrand auf. Der Abstand am oberen und unteren Bildschirmrand sollte automatisch gleich sein.
In deinem Beispiel habe ich im Style= "margin-bottom:25%;" noch hinzugefügt, dann klappt es in etwa. Vielleicht gibt es noch eine andere Lösung?
MfG,
Dixi
@rfb:
Danke für das Beispiel, nur leider sitzt das Feld am unteren Bildschirmrand auf. Der Abstand am oberen und unteren Bildschirmrand sollte automatisch gleich sein.
In deinem Beispiel habe ich im Style= "margin-bottom:25%;" noch hinzugefügt, dann klappt es in etwa. Vielleicht gibt es noch eine andere Lösung?
MfG,
Dixi
Antwort 3 von rfb
nanu?
bei mir bleibt es brav in der Mitte.
Problem könnte sein, wenn du der Tabelle erlaubst größer als die (im Beispiel) 60% Bildschirmhöhe zu sein.
bei mir bleibt es brav in der Mitte.
Problem könnte sein, wenn du der Tabelle erlaubst größer als die (im Beispiel) 60% Bildschirmhöhe zu sein.
Antwort 4 von Dixi
@rfb:
Die Höhe der Tabelle ergibt sich durch den Inhalt. Bei einen kleinen Bildschirm z.B. 17" verschwindet der untere Teil der Tabelle und bei 19" könnte es funktionieren, kann ich leider nicht nachprüfen, da mein Monitor 17" ist. Außerdem verwende ich Frames, da ist das Fenster sowieso noch kleiner.
Dixi
Die Höhe der Tabelle ergibt sich durch den Inhalt. Bei einen kleinen Bildschirm z.B. 17" verschwindet der untere Teil der Tabelle und bei 19" könnte es funktionieren, kann ich leider nicht nachprüfen, da mein Monitor 17" ist. Außerdem verwende ich Frames, da ist das Fenster sowieso noch kleiner.
Dixi
Antwort 5 von rfb
Zitat:
da mein Monitor 17"
die Lösung sollte sowieso unabhängig von deinem Bildschirm sein (oder ist das eine lokale Seite?). Außerdem bemerkst du selber mit da mein Monitor 17"
Zitat:
da ist das Fenster ... kleiner
dass nicht der Bildschirm sondern das Browserfenster die entscheidende Größe ist.da ist das Fenster ... kleiner
wenn du die Tabelle in o.g. div packst und dort im style
overflow:auto
ergänzt sollte der Tabellenüberhang scrollbar in dem schicken roten Rahmen verschwinden.Ob das vom Layout OK und überhaupt funktional ist musst du (und natürlich die Seitenbesucher) entscheiden.
Es gibt keine einfache Möglichkeit ein Objekt mit fixen Ausmaßen per CSS zu zentrieren wenn die Fenstergröße variabel bleiben soll (Ausnahme: Hintergrundbilder) .
Antwort 6 von Dixi
@rfb:
hier ist meine Beispielseite http://home.arcor.de/ra.pri/runview.html mit deinen eingearbeiteten Tipp.
Danke nochmal für deine Hinweise.
Dixi
hier ist meine Beispielseite http://home.arcor.de/ra.pri/runview.html mit deinen eingearbeiteten Tipp.
Danke nochmal für deine Hinweise.
Dixi