如何在 Flexbox 中將 Flex 專案置於同級專案的中心？-css教學-PHP中文網

如何在 Flexbox 中將 Flex 專案置於同級專案的中心？

Barbara Streisand

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

原創

415 人瀏覽過

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中文網其他相關文章！