首页 >web前端 >css教程 >为什么 `justify-content: center` 不使 Flex 容器中的文本居中?

为什么 `justify-content: center` 不使 Flex 容器中的文本居中?

Linda Hamilton
Linda Hamilton原创
2024-11-02 02:50:301009浏览

Why Doesn't `justify-content: center` Center Text in a Flex Container?

带有 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn