Html 文本未居中对齐内容：居中

我有一个带有

display:flex

的div。其内容水平和垂直居中

当div中的内容过长时，内容将换行。但在这种情况下，对齐被破坏了。请参阅代码片段

如果我添加

text align:center

，它将正确显示。但是为什么没有

文本对齐时它不居中：居中

.box{
宽度：100px；
高度：100px；
背景颜色：浅绿色；
利润率：10px；
}
.flex{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
对齐项目：居中；
证明内容：中心；
}
.与对齐{
文本对齐：居中；
}

这里有一些长文本
这里有一些长文本

flex容器的HTML结构有三个级别：

• 容器
• 项目
• 内容

每个级别代表一个独立的元素

在flex容器上设置的

justify content

属性控制flex项。它不能直接控制项的子项（本例中为文本）

在行方向容器上设置

justify content:center

时，项目将收缩到内容宽度（即收缩到适合），并水平居中。内容，在项目内，继续进行骑行

当内容比flex容器窄时，所有内容都很好地居中

另一方面，当内容比flex容器宽时，flex项不能再居中。事实上，项目根本无法对齐（

开始

，

结束

，

中心

），因为没有可用空间–项目占用了整个容器的宽度

在这种情况下，文本可以换行。但是

justify content:center

不适用于文本。从来没有。文本始终以默认值为准（

left

在LTR中/

right

在RTL中）

因此，若要直接将文本居中，请将

text align:center

添加到flex项（或flex容器，这实际上并不重要）

文章{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.中心{
文本对齐：居中；
}
/*仅演示样式*/
文章{
宽度：100px；
高度：100px；
利润率：10px；
背景颜色：浅绿色；
}

这里有一些长文本

这里有一些长文本