Bilder in einer Gallerie zentrieren

**MartinL** · 01.03.2018, 15:36

Hallo zusammen,

noch eine Frage hat sich bei mir ergeben. Ich nutze die Contao Gallerie und würde die ganze Gallerie gern zentriert anzeigen lassen. Ich habe in der Gallerie quadratische Vorschaubilder und habe auch dafür gesorgt, dass so viele Bilder in einer Zeile sind, wie passen. Das habe ich erledigt, indem ich in meine CSS-Datei folgendes eingefügt habe:

Code:

.ce_gallery ul li.col_first {
  clear: none;
}

Das führt jetzt dazu, dass so viele Bilder ein einer Reihe sind, bis kein Bild mehr passt. Es findet dann ein automatischer Umbruch in die nächste Zeile statt. Rechts bleibt dann aber je nach Breite des Browserfensters recht viel Platz. Ich fände es schöner, wenn die gesamte Gallerie, so wie sie ist, zentriert angezeigt würde. Ich hänge auch mal ein Bild an, auf dem man das "Problem" sieht und würde mich sehr über Lösungsvorschläge freuen.

Gruß
Martin

**Ainschy** · 01.03.2018, 21:10

Befasse dich doch mal mit Flexbox, da wirst du sicher die passenden Optionen finden.

**Niels H** · 02.03.2018, 07:42

Vielleicht passt diese Lösung für Dich: community.contao.org/de/showthread.php?69068-Gallerien-die-sich-der-Breite-anpassen

Damit würde auch nicht so viel von dem Bild abgeschnitten werden.

**Andreas** · 04.03.2018, 01:36

Das wird nicht so einfach sein. Probiere mit den Devtools mal diese zwei Möglichkeiten hier, dann wirst du sehen, wo das Problem liegt.
1.

PHP-Code:


.ce_gallery > ul {

    text-align: justify;

}

.ce_gallery > ul li {

    display: inline-block;

}

2.

PHP-Code:


.ce_gallery > ul {

    display: flex;

    flex-wrap: wrap;

    justify-content: center; /* center|space-around|space-between|space-evenly */

}

Deshalb würde ich dir empfehlen die Spaltenanzahl anzugeben und dann so ein CSS zu benutzen.

PHP-Code:


.ce_gallery .cols_1 li {

  width: 100%;

}

.ce_gallery .cols_2 li {

  width: 50%;

}

.ce_gallery .cols_3 li {

  width: 33.3333%;

}

.ce_gallery .cols_4 li {

  width: 25%;

}

.ce_gallery .cols_5 li {

  width: 20%;

}

.ce_gallery .cols_6 li {

  width: 16.6666%;

}

Dies könntest du dann über einen media query wieder auflösen.

PHP-Code:


/* 480px or less */

@media (max-width: 480px) {

  .ce_gallery .cols_1 li,

  .ce_gallery .cols_2 li {

    width: 100%;

  .ce_gallery .cols_3 li {

    width: 50%;

  }

  .ce_gallery .cols_4 li,

  .ce_gallery .cols_5 li,

  .ce_gallery .cols_6 li {

    width: 33.3333%;

  }

}

**mlweb** · 04.03.2018, 09:33

Gib doch mal einen Link zur Seite. Dann kann man Dir noch besser Tips geben.

**MartinL** · 23.03.2018, 18:51

Die Seite existiert erst einmal nur offline, ein Link ist also nicht vorhanden. Aktuell scheint mir die absolute Angabe der Spalten mit Mediaqueries der praktikabelste Weg. Komisch, dass das "Problem" nicht häufiger auftritt und von irgend jemandem schön gelöst wurde

.

Vielen Dank aber schon einmal für all eure Vorschläge.

**Andreas** · 23.03.2018, 19:52

Mein CSS aus obigem Post löst das Problem ja.

Füge das hier mal in der Online-Demo in die "Additional <head> tags" im Layout "2 columns" ein und spiele dann mit der Bildergalerie herum.

PHP-Code:


<style>

.ce_gallery > ul li.col_first {

  clear: none;

}

#container .image_container a img {

  display: block;

}

.image_container img {

  width: 100%;

  box-sizing: border-box;

}

.image_container a {

  display: block;

}

.ce_gallery .cols_1 li {

  width: 100%;

}

.ce_gallery .cols_2 li {

  width: 50%;

}

.ce_gallery .cols_3 li {

  width: 33.3333%;

}

.ce_gallery .cols_4 li {

  width: 25%;

}

.ce_gallery .cols_5 li {

  width: 20%;

}

.ce_gallery .cols_6 li {

  width: 16.6666%;

}



/* 480px or less */

@media (max-width: 480px) {

  .ce_gallery .cols_1 li,

  .ce_gallery .cols_2 li {

    width: 100%;

  }

  .ce_gallery .cols_3 li {

    width: 50%;

  }

  .ce_gallery .cols_4 li,

  .ce_gallery .cols_5 li,

  .ce_gallery .cols_6 li {

    width: 33.3333%;

  }

}

</style>