文本未以 justify-content: center 居中
当 Flex 容器内的内容变得过长时,会出现此问题,导致换行。虽然内容使用 justify-content: center 水平居中,但在换行过程中对齐会被打乱。
理解 Flexbox 中的三个级别
Flex 容器结构由三个级别组成:
每个级别代表一个独立元素。
Flex 容器中的对齐方式
justify-content 控制容器内 Flex 项目的对齐方式,但它不会直接影响该项目的子项目(在本例中为文本)。
当Flex 容器的宽度超过内容的宽度,Flex 项目会缩小以适应内容(shrink-to-fit)并水平居中。项目内的内容自动遵循此对齐方式。
内容超出 Flex 容器时的对齐方式
但是,当内容变得比 Flex 容器宽时,Flex 项目可以不再对齐。由于该项目占据了整个容器宽度,因此没有足够的可用空间来对齐。
文本对齐
尽管未对齐,但 text-align: center 从未应用于默认文本。要直接居中,必须将 text-align: center 显式添加到 Flex 项目或 Flex 容器。
代码示例
<code class="css">article { display: flex; align-items: center; justify-content: center; } .center { text-align: center; }</code>
<code class="html"><article> <p>some long text here</p> </article> <article> <p class="center">some long text here</p> </article></code>
以上是为什么 `justify-content: center` 文本在 Flex 容器中换行时不居中?的详细内容。更多信息请关注PHP中文网其他相关文章!