Nur ein bestimmtes Flex-Item vertikal zentrieren

Ü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;
}

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!

Das könnte auch interessant sein

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.