Wie kann ich ein mittleres Element zwischen Geschwisterelementen mit dynamischer Größe zentrieren?

Zentrieren des mittleren Elements mit dynamischen Geschwisterbreiten

Stellen Sie sich ein Layout vor, das aus drei horizontal ausgerichteten Feldern besteht, wobei Punkte den Abstand zwischen ihnen darstellen:

[Left box]......[Center box]......[Right box]

Wenn einer der Seitenkästen entfernt wird, sollte der mittlere Kasten bestehen bleiben zentriert:

[Left box]......[Center box].................

Und das Gleiche gilt, wenn die andere Seitenbox entfernt wird:

................[Center box].................

Zusätzlich sollte sich der Inhalt der Mittelbox erweitern, um den verfügbaren Platz auszufüllen, während die Seitenboxen fixiert bleiben Größe. Überlauf wird mit overflow:hidden und text-overflow:ellipse behandelt, um den Inhalt auszuschneiden.

[Left box][Center boxxxxxxxxxxxxx][Right box]

Während eine Flexbox-Struktur Elemente horizontal ausrichtet, behält sie die Zentrierung nicht bei, wenn Seitenboxen unterschiedliche Breiten haben. Um den gewünschten Effekt zu erzielen, führen wir verschachtelte Flex-Container und automatische Ränder ein:

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

Diese Strategie verwendet automatische Ränder, um das mittlere Element automatisch zu zentrieren, unabhängig von der Breite der Seitenboxen. Der justify-content: center; Durch die Ausrichtung wird sichergestellt, dass der Inhalt innerhalb der mittleren Box zentriert bleibt.

Durch die Verschachtelung von Flex-Containern begrenzen wir die Ränder auf die einzelnen Boxen und verhindern so, dass sie das Layout anderer Elemente beeinflussen. Mit dieser Methode wird eine echte Zentrierung auch bei deutlich unterschiedlichen Breiten der Seitenkästen erreicht.

Das obige ist der detaillierte Inhalt vonWie kann ich ein mittleres Element zwischen Geschwisterelementen mit dynamischer Größe zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!