Html 当文本换行而不使用flex将文本居中时，将段落元素居中

在这件事被投票遗忘之前，让我说，我已经搜索了许多类似于这件事的SO问题，但我发现没有一个能解决我的问题

我正在使用flexbox在元素中水平和垂直居中放置一些

标记。我不想将文本放在

元素的中心，只要将

元素本身放在中心即可

.app-outer{
显示器：flex；
弯曲方向：立柱；
}
.app{
显示器：flex；
弯曲方向：立柱；
身高：100%；
证明内容：中心；
对齐项目：居中；
}
.app p{
显示：内联块；
}
.标题栏{
背景色：#202225；
颜色：#72767D；
字体大小：粗体；
填充：0 0 2px 8px；
显示器：flex；
弯曲方向：行；
宽度：100%；
}

船艇
-&时代；
添加指向的浏览器源


可选参数threshold=n

。例：（默认值8）

---

它按预期工作，但由于

标记与视口的宽度相同，因此当vp太小时，它们会向左齐平，在这种情况下，url太长，以至于它会换行到下一行，并在第一行留下一个空间，使其看起来没有居中。我在

标记中添加了一些水平填充，以更好地说明：

.app-outer{
显示器：flex；
弯曲方向：立柱；
}
.app{
显示器：flex；
弯曲方向：立柱；
身高：100%；
证明内容：中心；
对齐项目：居中；
}
.app p{
显示：内联块；
填充：0 20px；
}
.标题栏{
背景色：#202225；
颜色：#72767D；
字体大小：粗体；
填充：0 0 2px 8px；
显示器：flex；
弯曲方向：行；
宽度：100%；
}

船艇
-&时代；
添加指向的浏览器源


可选参数threshold=n

。例：（默认值8）

---

您是否尝试将

p

元素

文本对齐：左

？我刚刚尝试过。它不起作用。不，只是文本对齐“中心”起作用@dx_over_dtUnset，但它的行为就像是整个宽度一样。@CedricGourville我不希望文本在段落元素中居中。我希望段落元素居中，但换行时如何忽略添加的空格？例如，在FB chat中，多行不一定会使聊天气泡达到最大宽度。如果我理解您的问题，请为您的p标记指定一个定义的宽度或最大宽度，并/或给它们水平填充。我希望元素的大小能够动态调整，以防添加更多文本。设置宽度或最大宽度将防止出现这种情况。您可以使用动态调整大小，例如

宽度：70%

。我几乎可以肯定的是，有了正确的CSS，它们不会总是100%地使用它们的父容器。就像我说的，FB聊天就是这么做的。