Supportnet Computer
Planet of Tech

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

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.

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

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
Zitat:
da ist das Fenster ... kleiner
dass nicht der Bildschirm sondern das Browserfenster die entscheidende Größe ist.

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