Wie zentriere ich eine mittlere Box zwischen ungleich großen Seitenboxen nur mit CSS?

Das Mittelelement inmitten ungleicher Nebenelemente zentriert halten

Einführung

Beim Entwerfen von Layouts mit nebeneinander liegenden Boxen mit unterschiedlichen Breiten kommt es häufig vor Die Herausforderung besteht darin, die Zentrierung des mittleren Kastens aufrechtzuerhalten. In diesem Artikel wird eine CSS-Lösung untersucht, um diesen Effekt zu erzielen.

CSS-Lösung mit Flexbox

Um die mittlere Box unabhängig von der Breite der Seitenboxen zu zentrieren, können wir Flexbox und automatische Ränder nutzen:

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

Hauptfunktionen

• Reines CSS:Keine zusätzlichen Bibliotheken oder JavaScript ist erforderlich.
• Keine absolute Positionierung: Elemente werden mithilfe der Flexbox positioniert, sodass keine absolute Positionierung erforderlich ist.
• Dynamische Ausrichtung: Die Mitte Box bleibt zentriert, unabhängig von der Breite der Seitenboxen.

Umsetzung Details

• Der .container ist eine Flexbox, die alle drei .box-Elemente umschließt.
• Jede .box ist auch eine Flexbox, mit justify-content: center, um ihren inneren Inhalt horizontal auszurichten .
• flex: 1 bewirkt, dass jede .box wächst, um den verfügbaren Platz gleichmäßig auszufüllen.
• Die Ränder Auf den inneren Elementen stellen Sie sicher, dass die Kanten der Seitenboxen immer die Kanten ihrer Behälter berühren.
• Automatische Ränder vergrößern oder verkleinern sich nach Bedarf, um die zentrierte Ausrichtung der mittleren Box beizubehalten.

Das obige ist der detaillierte Inhalt vonWie zentriere ich eine mittlere Box zwischen ungleich großen Seitenboxen nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!