带有 justify-content 的非居中文本：center

在 Flex 容器中， justify-content 属性使 Flex 项目水平居中，但是它无法直接控制这些项目中的文本。当文本在项目内换行时，它会保留其默认的 text-align: start 值，从而导致文本不居中。

Flex 容器、Flex 项目和文本代表 HTML 结构中的三个不同级别。 justify-content 影响 Flex 项目，而不是其中包含的文本。

如果 Flex 项目填充其容器的宽度，则它无法居中，因此换行时文本未对齐。

To直接将文本居中，通过继承将 text-align: center 分配给 Flex 项目或容器。

示例

.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