如何在 Flexbox 中将 Flex 项目置于同级项目的中心？-css教程-PHP中文网

如何在 Flexbox 中将 Flex 项目置于同级项目的中心？

Barbara Streisand

发布： 2024-10-30 20:43:03

原创

418 人浏览过

How to Center a Flex Item Among Siblings in Flexbox?

当 Flex 项目被其他 Flex 项目包围时居中

在 Flexbox 中，对齐项目通常是通过分配容器中的可用空间来实现的。因此，除非兄弟姐妹的组合长度两侧相等，否则不可能将单个 Flex 项目置于兄弟姐妹之间。

一种解决方法是将周围的 Flex 项目包装在它们自己的容器中。这样可以更好地控制空间分布并实现 h2 元素的居中。考虑以下修改后的 HTML 结构：

<code class="html"><div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 4</span>
    <span>I'm span 5</span>
    <span>I'm span 6</span>
  </div>
</div></code>

登录后复制

通过此修改，可以调整 CSS 规则以对齐 h2：

<code class="css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

.container > div {
  flex: 1 1 auto;
  text-align: center;
}

h2 {
  margin: auto;
}</code>

登录后复制

通过将 span 包装在单独的 div 中， flexbox 属性可用于控制它们各自的大小和对齐方式，确保 h2 保持居中，无论周围元素的数量如何。

以上是如何在 Flexbox 中将 Flex 项目置于同级项目的中心？的详细内容。更多信息请关注PHP中文网其他相关文章！