如何使用 CSS 网格将最后一行左对齐的框居中？

居中对齐并左对齐最后一行

此查询解决了在容器内对齐框的挑战，水平居中但与最后一行对齐行向左对齐。关键问题是，典型的 ul 元素往往会根据其内容来调整宽度，没有留下手动调整的空间。

为了解决这个问题，我们可以利用 CSS 网格，它可以更好地控制元素的放置。这是更新的 CSS 和 HTML 代码片段：

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

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

通过添加 justify-content: center;对于 ul 元素，我们将内容向中心移动。但是，我们保持最后一行左对齐，这是 CSS 网格的固有属性。

要调整元素的宽度和高度，请修改 grid-template-columns 和 grid-auto- 中的值行。调整 div 的 padding 和 width 属性以满足您的设计要求。

通过利用 CSS 网格的灵活性，我们可以实现动态内容对齐，而无需依赖手动调整或脚本。

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