Warum zentriert „justify-content: center' Text nicht in einem Flex-Container?

Nicht zentrierter Text mit justify-content: center

In einem Flex-Container zentriert die justify-content-Eigenschaft Elemente horizontal, aber Es hat keine direkte Kontrolle über den Text in diesen Elementen. Wenn der Text innerhalb des Elements umbrochen wird, behält er seinen Standardwert text-align: start bei, was zu nicht zentriertem Text führt.

Der Flex-Container, die Flex-Elemente und der Text stellen drei verschiedene Ebenen in der HTML-Struktur dar. justify-content wirkt sich auf Flex-Elemente aus, nicht auf den darin enthaltenen Text.

Wenn das Flex-Element die Breite seines Containers ausfüllt, kann es nicht zentriert werden, weshalb der Text beim Umbrechen falsch ausgerichtet ist.

An Zentrieren Sie den Text direkt, weisen Sie text-align: center durch Vererbung dem Flex-Element oder Container zu.

Beispiel

<code class="css">.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.with-align p {
  text-align: center;
}</code>

<code class="html"><div class="box">
  <p>some long text here</p>
</div>

<div class="box with-align">
  <p>some long text here</p>
</div></code>

Das obige ist der detaillierte Inhalt vonWarum zentriert „justify-content: center' Text nicht in einem Flex-Container?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!