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

.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.with-align p {
  text-align: center;
}

  
some long text here



  
some long text here