Frage Vertikal zentrieren: Inhalte von Flex-Boxen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

SinaTheresa

Neues Mitglied
21 März 2021
2
0
1
29
Hallo,
ich habe einige Bilder & Bildunterschriften mit einem Flex-Container nebeneinander angeordnet. Jetzt möchte ich, dass jedes Bild samt Bildunterschrift innerhalb der Flex-Box vertikal zentriert ist. Ich habe schon verschiedenes ausprobiert, komme aber einfach nicht weiter...
Kann jemand helfen?
LG, Sina
Browseransicht.JPG
HTML.JPG
Fehler.JPG
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Ich nehme an, mit Flexbox meinst Du die figure-Elemente? Dann geht es am einfachsten, indem Du diese auch zu Flex-Containern machst, dann kannst Du jeweils das Bild und die Beschreibung darin mit align-items zentrieren:
Code:
figure {
    display: flex;
    align-items: center;
}
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
PS: Oder möchtest Du, dass Bild und Beschriftung untereinander bleiben, aber vertikal zentriert sind? Dann musst Du flex-direction auf column setzen und mit justify-content zentrieren:
Code:
figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
 
Werbung:
Werbung: