Guten Tag liebe Community,
ich habe ein Problem ich möchte auf einer Website eine Tabelle relativ positionieren.
Jedoch möchte ich das die Mitte der Tabelle für die Positionierung genutzt wird und nicht die Ecken.
Danke für Hilfe im Vorraus XD
Tabelle richtig positionieren anhand von Tabellen Mitte
-
-
-
Ja das stimmt schon aber gibt es generell eine Möglichkeit nicht die linke, obere Ecke
für die Positionierung einer Objektes zu nutzen sonder die unterer oder die Mitte? -
Ja, gibt es. Ein Beispiel wäre die absolute/relative Positionierung einer Box kombiniert mit einem transform: translate(), um die Box zu zentrieren.
So sieht das dann im Code aus:
-
Mit dieser Methode gehen aber auch Inhalte verloren, wenn das Browserfenster verkleinert wird. Dann lieber mit Flexbox.
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Zentrieren mit Flexbox</title> <style> body, html { height:100%; display:flex; justify-content:center; align-items:center; } div { padding:10px; background:#eee; } </style> </head> <body> <div>Vertically and horizontally centered box</div> </body> </html>
-
Naja, wenn man's so nimmt, wäre deine erste Variante eigentlich die beste.
Damit kann man eigentlich gar nichts falsch machen.
Ich habe aber eben genau die Variante mit absoluter Positionierung und transform: translate() gewählt, weil die Äußerung des TOs sich danach anhörte.
Denn mit transform: translate(-50%, -50%) wirkt man ja genau gegen das Problem, dass es anhand der Seiten und nicht anhand des Mittelpunkts zentriert wird.
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!