如何在左对齐最后一行的同时使盒子网格居中？

如何将框居中但最后一行左对齐

问题：

用户想要将容器中的框居中对齐，但保持最后一行向左对齐。换句话说，他们希望防止文本在最后一行居中。

相关代码：

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

使用 CSS 的解决方案网格：

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;
}

示例结果：

item1	item2	item3
item4	item5	item6
item7	item8	item9

说明：

• 使用CSS网格布局代替flexbox或内联块。
• 对齐内容：中心； ul 元素的属性将框与父容器的中心对齐。
• grid-template-columns 属性定义每个框的宽度。
• grid-gap 属性控制空间
• 该解决方案会自动将盒子居中对齐，并容纳不同长度的行，无需手动调整或脚本。

以上是如何在左对齐最后一行的同时使盒子网格居中？的详细内容。更多信息请关注PHP中文网其他相关文章！