Über die CSS-Angabe align-items: center
können nebeneinander liegende Flex-Items zueinander vertikal zentriert werden, sodass ihre Mitte auf derselben Horizontalen liegt. Ich hatte nun den Fall, dass von zwei Flex-Items nur das rechte zentriert werden soll, wenn das linke höher ist – aber nicht das linke, wenn das rechte höher ist. Dafür scheidet die align-items: center
-Angabe aus, aber die Problemlösung ist nicht viel aufwendiger:
.center-flex-item {
margin-bottom: auto;
margin-top: auto;
}
Code-Sprache: CSS (css)
Damit wird das Flex-Item .center-flex-item
immer zentriert, wenn ein daneben stehendes Item mehr Platz in der Höhe einnimmt, aber das andere nicht, wenn .center-flex-item
höher ist.
Update vom 9. Juni 2017: Einfacher und mit der dafür vermutlich richtigeren CSS-Regel geht es so:
.center-flex-item {
align-self: center;
}
Danke an Matthias für den Hinweis!