Gleiche Höhe und Bilder Mittig im Listenmodul

[Bensh86]

Hallo,

kann mir bitte jemand weiterhelfen? Habe zwar schon einige ähnliche Beiträge gefunden aber bisher bekomme ich es nicht hin...

Ich möchte, dass alle Elemente gleich Hoch sind und dass die enthaltenen Bilder vertikal zenriert werden.

Die Höhe kann ich ja einfach selbst festlegen:

.ce_image.attribute.image {
min-height: 350px;
}

Aber ich bekomme es einfach nicht hin, dass die Bilder vertikal zenriert werden.

[Tim]

Das geht mit Tabellen bzw. display:table und display:table-cell oder mit display flex.
Oder natürlich durch Gefummel

[Bensh86]

Hi Tim,

dss habe ich schon versucht aber bekomm es nicht hin.

Wären es nicht Sinnvoll, dass das Theme so etwas von Haus aus macht? Jeder der einen Shop baut hat ja mit Sicherheit unterschiedliche Bilder und möchte das alles gleichmäßig verteilt ist und der Text in einer Reihe steht...

[Tim]

Baust du denn auf einem theme-eigenen Layout auf? Der "ProductCatalog" ist quasi so aufgebaut: http://cc.unlimited-c4.premium-conta...benzieher.html

Ich denke man muss hier schon etwas selbstständig tunen, wenn mit abweichende Bildgrößen zutun hat.
Der Bild-Container selbst sollte eine feste Größe haben und z.B. display:table fahren.
Dann können die Kind-Elemente display:table-cell sein und zentriert werden mit text-align center und vertical-align middle

Display flex ist sicher die modernste Variante und erlaubt freies Ausrichten. (AutoGrid 2 setzt auf flex)

Alternative ist natürlich von vornherein für gleiche Formate sorgen, was viele Shops machen. Fotos quasi auf weißem Hintergrund und zentriert. Damit verhalten sich alle Bilder immer identisch.
---
Die Gleiche Höhe der Elemente selbst würde ich einfach mit min-height machen.

[Bensh86]

Habe als Vorlage den ProductCatalog genommen. Von vorne herein gleiche Formate sorg leider für sehr viel Arbeit. Vorallem, wenn der Kund nachher selbst Artikel dazufügen können soll ohne dass er erst mal das Bild bearbeiten muss.

Daher vertehe ich nicht so ganz, warum es nicht gleich per CSS so gemacht wird wie du es beschrieben hast. Dann würden alle Bilder richtig angezeigt werden

[Tim]

Ich sehe das als individuellen Wunsch. Die Zentrierung per CSS kann ich als als Feature-Request vorsehen. Würde mich aber dagegen aussprechen, weil es nicht zwingend immer gewünscht ist und feste Höhen setzt.
Das CSS ist auch schnell selbstständig ergänzt. Die Thematik ist sehr gut bei google dokumentiert mit Beispiel:
Ganz unten der Weg per table-cell: http://www.ich-lerne-css.de/Style/Ex...07/center.html

.mod_customcataloglist .image {display: table; height: 300px; text-align: center;}
.mod_customcataloglist .image > div {display: table-cell; vertical-align: middle;}

[Bensh86]

Vielen Dank Tim!

Jetzt muss ich nur noch die Höhe anpassen aber das bekomme ich hin ;-)