如何在左對齊最後一行的同時使盒子網格居中？

如何將框居中但最後一行左對齊

問題：

問題：

用戶將容器中的框置中對齊，但保持最後一行向左對齊。換句話說，他們希望防止文字在最後一行居中。

div {
  padding: 20px;
  width: 200px;
  background-color: green;
  text-align: center;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

ul li {
  width: 40px;
  height: 40px;
  background-color: wheat;
  display: inline-block;
}

相關程式碼：

item1	item2	item3
item4	item5	item6
item7	item8	item9

範例結果：

div {
  padding: 20px;
  width: 200px;
  border: 1px solid;
  overflow: hidden;
  resize: horizontal;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px); /* width of elements here */
  grid-auto-rows: 40px; /* height here */
  grid-gap: 4px;
  justify-content: center; /* this will do the magic */
}

ul li {
  background-color: wheat;
}

使用 CSS的解決方案網格：

item1	item2	item3
item4	item5	item6
item7	item8	item9

示例結果：

說明：
使用CSS網格佈局來取代flexbox或內聯塊。
• 對齊內容：中心； ul 元素的屬性將框與父容器的中心對齊。
• grid-template-columns 屬性定義每個框的寬度。
• grid-gap 屬性控制空間

此解決方案會自動將盒子居中對齊，並容納不同長度的行，無需手動調整或腳本。

以上是如何在左對齊最後一行的同時使盒子網格居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！