带有 justify-content 的非居中文本:center
在 Flex 容器中, justify-content 属性使 Flex 项目水平居中,但是它无法直接控制这些项目中的文本。当文本在项目内换行时,它会保留其默认的 text-align: start 值,从而导致文本不居中。
Flex 容器、Flex 项目和文本代表 HTML 结构中的三个不同级别。 justify-content 影响 Flex 项目,而不是其中包含的文本。
如果 Flex 项目填充其容器的宽度,则它无法居中,因此换行时文本未对齐。
直接将文本居中,通过继承将 text-align: center 分配给 Flex 项目或容器。
示例
<code class="css">.box { width: 100px; height: 100px; background-color: lightgreen; margin: 10px; display: flex; align-items: center; justify-content: center; } .with-align p { text-align: center; }</code>
<code class="html"><div class="box"> <p>some long text here</p> </div> <div class="box with-align"> <p>some long text here</p> </div></code>
以上是为什么 `justify-content: center` 不使 Flex 容器中的文本居中?的详细内容。更多信息请关注PHP中文网其他相关文章!