• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabelle innerhalb eines Div vertikal zentrieren

A

andynail

Mitglied
Hallo zusammen
Auf meiner Seite soll im inneren Bereich eine Tabelle zentriert angezeigt werden. Mit Margin left und right = auto schaffe ich es horizontal.

Jetzt setze ich die Tabelle in ein Div, richte dieses mit

HTML: 
.style.marginTop = ((DatenHeight + KennungHeight + 8)/2) * -1
und mit top:50& aus.

Alles schön und toll, doch muss ich damit auch immer die Größe des Divs an die Tabelle anpassen. Schade, denn ich würde gerne weniger javascript Code einsetzen müssen. Und ich kann auch nicht den Bereich einschränken in diesem sich die Tabelle nur bewegen darf.

Ich habe auch noch nie erlebt das vertical-align:middle funktioniert:

HTML: 
<html>
<body>
<div style="position:relative; vertical-align:middle; top:100px; height:100%; background-color:#9af379; width:auto">
Der Text mal so zum Test
</div>
</body>
</html>

Danke Gruß Andreas
 
Den selben Effekt kannst Du natürlich auch mit CSS erzielen, dazu brauchts kein (abschaltbares) JavaScript.
Vertikales Zentrieren ist nur für Tabellenzellen vorgesehen, also hast Du vielleicht auch einen Fehler in Deiner logischen Struktur.
Das div kann sich mit display:table-cell natürlich verhalten wie eine Tabellenzelle, damit kommt aber ein alter, aber noch weit verbreiteter Browser nicht klar.
 
Hallo

ich würde dann auch gerne wissen wie sowas funktioniert. Hatte vertical-align woanders erfahren dürfen. Und das es in Tabellen Zellen funktioniert erlebte ich bereits.

Wie gesagt wäre es aber toll es anders hinzubekommen.

Danke gruß Andreas
 
Sowas? Du meinst, die CSS-Variante?
Na, genauso.
Das Element bei 50% von oben positionieren und dann um die Hälfte seiner Größe nach oben verschieben.

Code: 
position:absolute;
top:50%;
height:200px;
margin-top:-100px;
Wobei margin-top immer negativ die Hälfte der Höhe (height) ist.
 
so hallo

ich hatte wohl zu unausführlich die Situation geschildert. Aber von den 50% schrieb ich don schon. Und dann schrieb ich ja bereits das ich dann die Tabelle, dessen Größe sich immer ändert, nicht auf diesen Bereich einschränken kann. Sie fährt immer über das umliegende div heraus und wenn ich overflow benutze dann verschwindet sie ja.

Danke gruß Andreas
 
Zuletzt bearbeitet:
Also nach nochmaligem Lesen stelle ich Ungereimtheiten fest, wie warum Du eine Tabelle zur Positionierung nochmal in ein div setzt (das ja eigentlich zum ruppieren ist). Dann ist die Frage nach der Tabelle: tabellarische Daten?

Wenn Deine Tabelle zu groß für das umliegende Element ist, dann wird das Element vergrößert. Wenn die Tabelle aus dem Textfluss genommen wird oder das Elternelement eine feste Größe hat, dann geht die Tabelle wohl über den Rand hinaus. Wenn Du overflow:auto venutzt, verschwindet sie natürlich, aber dafür hast Du ja Scrollbalken.

Gib doch mal den Link zur Seite, vielleicht kann man sich dann eher vorstellen, was Du meinst...
 
Hallo

der Bereich in diesem sich die Tabelle befinden darf soll die Größe der Seite minus Randabständen sein. Und wird die Seite verkleinert und die Tabelle passt nicht mehr in den Bereich, dann verschiebt sie sich außerhalb des Bereichs und hält nicht den Mindestabstand von 65px. Wie auch bei einem anderen Objekt das nur vertikal auf die Seitenmitte gestellt wird, aber auch keinen Abstand zu einem oben liegenden Objekt hält. Und ich dachte nicht das sich die Tabelle auch ohne ein div verschieben liese, was ja jetzt einwandfrei funktioniert. Doch übrigens weis ich nicht wie ich den Bereich stets auf die volle Seitengröße minus Randabständen bekommen soll. Ich mach das gerade per javascript.

Danke gruß Andreas
ps: Einen Link auf die Seite gibts nicht, die Seite ist eine Linksammlung mit Passwörtern für den USB Stick
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben