Heim > Web-Frontend > CSS-Tutorial > Warum zentriert „justify-content: center' Text nicht, wenn er in einen Flex-Container eingeschlossen wird?

Warum zentriert „justify-content: center' Text nicht, wenn er in einen Flex-Container eingeschlossen wird?

Mary-Kate Olsen
Freigeben: 2024-10-31 06:21:30
Original
775 Leute haben es durchsucht

Why Doesn't `justify-content: center` Center Text When It Wraps in a Flex Container?

Text nicht zentriert mit justify-content: center

Dieses Problem tritt auf, wenn der Inhalt in einem Flex-Container übermäßig lang wird, was zu einem Umbruch führt . Während der Inhalt mit justify-content:center horizontal zentriert wird, wird die Ausrichtung beim Umbrechen gestört.

Die drei Ebenen in Flexbox verstehen

Eine Flex-Container-Struktur besteht aus drei Ebenen:

  • Container
  • Element
  • Inhalt

Jede Ebene stellt ein unabhängiges Element dar.

Begründung in Flex-Containern

justify-content steuert die Ausrichtung von Flex-Elementen innerhalb des Containers, hat jedoch keinen direkten Einfluss auf die untergeordneten Elemente des Elements (in diesem Fall den Text).

Wenn die Wenn die Breite des Flex-Containers die Breite des Inhalts überschreitet, wird das Flex-Element verkleinert, um es an den Inhalt anzupassen (shrink-to-fit) und horizontal zentriert. Der Inhalt innerhalb des Elements folgt automatisch dieser Ausrichtung.

Ausrichtung, wenn der Inhalt den Flex-Container überschreitet

Wenn der Inhalt jedoch breiter als der Flex-Container wird, kann das Flex-Element dies tun nicht mehr ausrichten. Da das Element die gesamte Containerbreite einnimmt, ist nicht genügend freier Platz für die Ausrichtung vorhanden.

Textausrichtung

Trotz der Fehlausrichtung wurde text-align:center nie angewendet standardmäßig der Text. Um es direkt zu zentrieren, muss text-align: center explizit entweder dem Flex-Element oder dem Flex-Container hinzugefügt werden.

Codebeispiel

<code class="css">article {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center {
  text-align: center;
}</code>
Nach dem Login kopieren
<code class="html"><article>
  <p>some long text here</p>
</article>

<article>
  <p class="center">some long text here</p>
</article></code>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWarum zentriert „justify-content: center' Text nicht, wenn er in einen Flex-Container eingeschlossen wird?. 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