如何使用 CSS 網格將最後一行左對齊的框置中？-css教學-PHP中文網

如何使用 CSS 網格將最後一行左對齊的框置中？

Mary-Kate Olsen

發布： 2024-12-17 00:36:26

原創

292 人瀏覽過

How to Center Boxes with a Left-Aligned Last Row Using CSS Grid?

最後一行左對齊的居中框

處理動態元素列表時，在對齊最後一行的同時實現居中佈局可能具有挑戰性左邊的元素。雖然 text-align: center 水平對齊容器內的元素，但它不考慮容器的寬度。

解決問題

CSS Grid 提供了解決此問題的方法：

div {
  display: grid;
  justify-content: center;
}

登入後複製

顯示：grid 將容器轉換為網格
justify-content: center 使網格內容水平居中。

但是，為了確保最後一行元素左對齊，我們需要指定使用grid-template-columns 的網格中的列數：

ul {
  grid-template-columns: repeat(auto-fit, 40px);
}

登入後複製

repeat( auto-fit, 40px) 根據需要建立盡可能多的欄位以適應內容，每列的寬度為40px。

範例：

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

登入後複製

使用此解決方案，無論列表中有多少元素，框都保持水平居中，而最後一行向左對齊。

以上是如何使用 CSS 網格將最後一行左對齊的框置中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！