Masonry gallerie - Bilder zentrieren

[tilda]

Hallo Zusammen,
ich habe eine Galerie mit Masonry erstellt und möchte gerne das die Bilder zentriert sind.
Den Text unter den Bildern kann ich zentrieren, aber die Bilder immer nur mit float:left oder float:right positionieren.

Beste Grüße
Tilda

[MacKP]

Hallo tilda,
wenn du das damit gemacht hast: https://masonry.desandro.com/options.html
Dann müsstest du da auch eine optin finden. Ich glaube allerdings nicht, dass es damit geht. Liegt ja eigentlich in der Natur der Sache, dass es alles an einer Seite ausrichtet und dann optimal verteilt. Zentrieren und optimal verteilen ist ja eben gar nicht mehr ausgerichtet, was das JS dann eben auch nicht kann.
Eventuell willst du dann also etwas ganz anderes? Dann solltest du dir eventuell mal CSS-Grid oder flexbox anschauen.

Viele Grüße

[tilda]

Ich habe hier mal ein Beispielbild hinterlegt.
Es soll nach innen zentriert sein und an den Seiten auslaufen (wie eine "Wolke")
- damit wären die Bilder ja optimal verteilt.
ist das mit masonry möglich?

[lucina]

Alles was mit Masonry möglich ist findest Du unter https://masonry.desandro.com/. Bei deinem Screenshot schaut es eher nach individueller Formatierung aus. Vielleicht sind das ja auch zwei Spalten, deren Inhalte nach rechts bzw. links floaten?

[tilda]

Vielen Dank für den Gedanken! Ich habe es nun mit 2 Spalten gelöst.
Trotzdem wäre mir eine Lösung lieber, bei der ich einfach alle Bilder in die Galerie schiebe
und diese automatisch so geordnet werden, dass es zu beiden Seiten ausfranzt.
Gibt es da noch ein anderes Modul, mit dem ich dies machen kann?

[lucina]

CSS Flexbox?

.container {
  min-height: 400px;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: auto;
  align-content: center;
}
.container:after {
  display: block;
  content: " invisible node ";
  flex: 999 999 auto;
}
.item {
  flex: 0 0 auto;
  margin: 5px;
}

[tilda]

Dann würde ich die Bilder in eine normale Galerie legen?
Dieser eine klasse zuweisen und dann deinen CSS Code nehmen?
Sorry, für die etwas unbedarfte Frage ...
Ich habe mit Flexbox noch nichts gemacht.
und so haeb ich es gerade probeirt, aber es hat sich nichts geändert???