Bilder zentrieren, ungewöhnlich!

[Webhufi]

Hallo,

in meinem CMS habe ich Bilder eingefügt, die in einer Art Box präsentiert werden. Leider finde ich keine Möglichkeit, Hochkantbilder in dieser Box zu zentrieren; das sieht einfach doof aus... (Bild 1).
Ich habe jedoch die Möglichkeit des Einfügens von CSS, kriege jedoch nicht raus, wie und ob überhaupt; die Eintragung dort funktioniert nicht. (Bild 2).

Viele Grüße
Norbert

 

[Webhufi]

Hallole Ulrich,

eine kleine Bitte habe ich noch: Kannst du das CSS so erweitern, dass die Bilder nicht nur vertikal zentriert werden, sondern auch horizontal?

 

[Sempervivum]

Das liegt an der Vielzahl der Container, daher muss man an vielen Stellen ansetzen. Ich sehe es mir morgen genauer an.

 

[Webhufi]

Eigentlich ist es doch nur ein Container, aber mit vielen Bildern darin? Bei der vertikalen Zentrierung hat es doch auch auf einen Schlag geklappt?
Wahrscheinlich kapiere ich das wieder mal nicht... ;-)

 

[Sempervivum]

Das war ein wenig ungenau ausgedrückt, ich meinte, dass es so eine tiefe Verschachtelung ist:

 

[Sempervivum]

Wenn ich an der richtigen Schraube drehe, ist es ganz einfach:

div.zpRow {
    margin-bottom: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    /* align-items: flex-start; */
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* dieses zentriert die Items vertikal: */
    align-items: center;
}

Jetzt sehen allerdings die ersten beiden Items nicht mehr so gut aus. Das liegt daran, dass bei "Bär, Mundenheim" in dem span mit dem Text noch ein p-Element liegt mit einem Margin unten. Setze ich das auf 0 ist auch dieses Element richtig ausgerichtet:

p {
    margin: 0 0 15px 0;
    padding: 0;
}

p#isPasted {
    margin: 0;
}

 

[Webhufi]

Spitzenklasse! Jetzt sieht es wirklich prima aus!
Das "isPasted" hab ich überall rausgenommen, wo es nicht hingehörte; keine Ahnung, warum das bei manchen drin war.

Ganz herzlichen Dank mal wieder, und alles Gute!!!

Norbert