Wie zentriere ich einen flexiblen Artikel in einem Container mit unebenen umgebenden Elementen?-CSS-Tutorial-php.cn

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

Barbara Streisand

Freigeben： 2024-11-01 02:45:28

Original

223 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

Vorheriger Artikel：Wie erhalte ich die Höhe eines Div ohne eine definierte CSS-Höhenregel? Nächster Artikel：Wie richtet man „Elemente innerhalb eines“ vertikal aus?

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

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

1724

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

1880

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1591

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...