Нецентрированный текст с justify-content: center

В гибком контейнере свойство justify-content центрирует элементы по горизонтали, но он не имеет прямого контроля над текстом внутри этих элементов. Когда текст обтекает элемент, он сохраняет значение по умолчанию text-align: start, в результате чего текст становится нецентрированным.

Гибкий контейнер, гибкие элементы и текст представляют три различных уровня в структуре HTML. justify-content влияет на гибкие элементы, а не на текст, содержащийся в них.

Если гибкий элемент заполняет ширину своего контейнера, его нельзя центрировать, следовательно, текст при переносе будет смещен.

Чтобы центрируйте текст напрямую, присвойте text-align: center гибкому элементу или контейнеру посредством наследования.

Пример

.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