Kann man display: inline-table; mittig zentrieren?
Ich nutze Wordpress mit dem Divi PlugIn.
Ich habe 17 Bilder in einer Row die ich durch display: inline-table; nebeneinander gebracht habe, welche aber immer links oder rechtsbündig in dieser Reihe sind.
Ich hätte allerdings alles gerne mittig oder immer auf maximaler breite des Bildschirms dass man nicht sieht dass es nicht mittig ist aber alles in eine Reihe bleibt ohne dass ein Bild in eine zweite Reihe springt.
Gibt es dafür einen CSS code? float geht ja leider nur mit links oder rechts.
Generell würde auch eine komplette alternative in Frage kommen mit der ich alle 17 Bilder nebeneinander setzen kann und diese klickbar bleiben.
1 Antwort
Was hättest du denn gern und was läuft anders als gewünscht? Das wird mir aus dieser Frage nicht ganz klar. Vermutlich steht die gesamte Reihe von Bildern linksbündig, sodass rechts ein unschöner Leerraum bleibt.
Was spricht dagegen, die ganze "Tabelle" in ein zentriertes Element zu setzen? Sollen sich die Bilder direkt an den Fließtext anschließen?
Hab ein wenig recherchiert - Layouts mit derartigen Eigenschaften sind nicht ganz leicht umzusetzen. Vielleicht hilft eine Grid-Darstellung (https://www.mediaevent.de/css/display-grid.html)?
Auch nicht, indem du das komplette Element mit "display:inline-table" in ein zentriertes Element packst? Kannst du der Tabelle (auch wenn sie nur in der Formatierung, aber nicht in der Dokumentenlogik ist) nicht sagen, dass sie 100% der verfügbaren Breite einnehmen soll?
Danke für deine Hilfe! Ich hatte das "display:inline-table"-Element bereits in einem zentrierten Element. Dabei hatte ich rechts immer mehr Platz als links und wenn ich das Fenster verkleinert habe ist immer ein Bild in eine neue Zeile gesprungen. Die Lösung des Problems war es jetzt nicht mit pt abständen und Größen zu arbeiten sondern in % und vw. Die Bilder sind jetzt bis zum Rand skaliert und passen sich der Größe des Bildschirms an.
Generell habe ich bei Divi die Möglichkeit 6 Rows zu bilden, ich möchte allerdings nicht nur 6 Bilder nebeneinander haben, sondern 17. Darum habe ich nach einer CSS Möglichkeit gesucht quasi mehr "rows" zu haben um die 17 Bilder nebeneinander zu bekommen. Das hat mit display: inline-table; und einer Row gut geklappt. Leider kann ich damit die Bilder nicht mittig ausrichten und bisher habe ich nichts gefunden durch was ich display: inline-table; zentrieren kann. Es ist immer alles linksbündig oder mit floating rechts bündig.