Tabelle richtig positionieren anhand von Tabellen Mitte

  • 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

  • Ich vermute mal, dass Du deine Tabelle zentrieren möchtest. Dazu musst du die Tabelle eine feste Breite in Pixel oder Prozent geben und mit margin zenreieren.


    CSS
    table {
     width:80%;
     margin:10px auto;
    ]


    Der erste Wert gilt für oben und unten, der zweite Wert für links und rechts.

  • 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:


    HTML
    <body>
    <div class="centered">Vertically and horizontally centered box</div>
    </body>


    CSS
    .centered {
      background-color: #dadada;
      width: 70%;
      padding: 2%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  • Mit dieser Methode gehen aber auch Inhalte verloren, wenn das Browserfenster verkleinert wird. Dann lieber mit Flexbox.

  • 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!