Wie zentriere ich ein mittleres Element in einem horizontalen Layout mit ungleichen Geschwisterbreiten?

Aufrechterhaltung der zentrierten Ausrichtung für mittlere Elemente mit unterschiedlichen Geschwisterbreiten

Diese Frage befasst sich mit der Herausforderung, ein mittleres Element innerhalb eines horizontalen Layouts zu zentrieren, wenn das Die Breite der Seitenelemente kann variieren. Der gewünschte Effekt besteht darin, sicherzustellen, dass das mittlere Element auch dann zentriert bleibt, wenn die seitlichen Elemente ungleich groß sind.

Um dies zu erreichen, wird ein verschachtelter Flexbox-Ansatz verwendet. Die folgenden CSS-Regeln bilden den Kern der Lösung:

.container {
    display: flex;
}

.box {
    flex: 1;
    display: flex;
    justify-content: center;
}

.box:first-child > div { margin-right: auto; }

.box:last-child > div { margin-left: auto; }

Innerhalb des Containers erhält jede Box einen Flex von 1, um sicherzustellen, dass sie den verfügbaren Platz proportional teilen. Jede Box wird dann als Flex-Container mit justify-content: center angezeigt, um ihren Inhalt zu zentrieren.

Für die erste Box wird mit margin-right: auto ein rechter Rand auf ihr untergeordnetes Element angewendet, und umgekehrt Mit margin-left: auto wird ein linker Rand auf das untergeordnete Element der letzten Box angewendet. Dadurch können die Ränder automatisch vergrößert werden, wodurch der Inhalt an die jeweiligen Ränder gedrückt wird und die mittlere Box effektiv in der Mitte ausgerichtet wird.

Diese Lösung erzielt den gewünschten Effekt, indem sie sicherstellt, dass das mittlere Element unabhängig von seiner Breite zentriert bleibt Geschwisterboxen. Es handelt sich um eine reine CSS-Lösung, die kein zusätzliches Scripting oder absolute Positionierung erfordert.

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein mittleres Element in einem horizontalen Layout mit ungleichen Geschwisterbreiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!