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

最後一行左對齊的居中框

處理動態元素列表時，在對齊最後一行的同時實現居中佈局可能具有挑戰性左邊的元素。雖然 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>
  </ul>
</div>

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

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