Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie zentriere ich einen flexiblen Artikel in einem Container mit unebenen umgebenden Elementen?

Barbara Streisand
Freigeben: 2024-11-01 02:45:28
Original
291 Leute haben es durchsucht

How to Center a Flex Item in a Container with Uneven Surrounding Elements?

Zentrieren eines Flex-Elements in einem Container inmitten anderer Flex-Elemente

Herausforderung:

Zentrieren eines

innerhalb eines Flex-Containers, während er von einer unterschiedlichen Anzahl von Elemente.

Ansatz:

Da die Eigenschaften der flexiblen Ausrichtung den freien Platz innerhalb des Containers verteilen, ist das Zentrieren eines einzelnen Elements unter ungleichen Geschwistern ohne zusätzliche Maßnahmen eine Herausforderung.

Überlegung:

Wenn die Gesamtlänge der umgebenden Elemente auf beiden Seiten des Artikels gleich ist, wird eine Zentrierung möglich.

Lösung:

Wickeln Sie das

innerhalb seines
Container, wodurch die gleiche Gesamtlänge wie der verbleibende Inhalt sichergestellt wird.

<code class="html"><div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
  </div>
  <div>
    <h2>I'm an h2</h2>
  </div>
  <div>
    <span>I'm span 3</span>
  </div>
</div></code>
Nach dem Login kopieren
<code class="css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container div {
  flex: 1 1 auto;  // Equalize flex sizing
  text-align: center;
}

h2 {
  flex: 0 0 auto;  // Prevent h2 from affecting flex sizing
  margin: auto;   // Center within its container
}</code>
Nach dem Login kopieren

Erklärung:

Durch Festlegen der Flex-Eigenschaften des inneren

Container auf „1 1 auto“ setzen, nehmen sie den gleichen Platz im Flex-Container ein. Die Flex-Eigenschaft von

ist auf „0 0 auto“ gesetzt, wodurch es von der Flex-Space-Verteilung ausgeschlossen wird. Die Randautomatik stellt sicher, dass

ist innerhalb seines
zentriert. Container.

Zusätzliche Einblicke:

  • Elemente werden innerhalb ihres jeweiligen
    zentriert. Container aufgrund der text-align-Eigenschaft.
  • Während dieser Ansatz die

    perfekt, es ist möglicherweise nicht geeignet, wenn die Länge des umgebenden Inhalts dynamisch ist.

Das obige ist der detaillierte Inhalt vonWie zentriere ich einen flexiblen Artikel in einem Container mit unebenen umgebenden Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage