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

使用 CSS 网格居中和左对齐框

许多用户在居中对齐框同时将最后一行与最后一行对齐时遇到了挑战左边。默认情况下，ul 元素往往具有固定的宽度，无法适应其内容，因此很难自动实现居中和左对齐。

CSS 网格解决方案

为了解决这个问题，可以使用CSS网格。通过实现以下 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 */
  grid-auto-rows: 40px; /* Height of elements */
  grid-gap: 4px;
  justify-content: center; /* Centers boxes */
}

ul li {
  background-color: wheat;
}

HTML 代码

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

说明

grid-template-columns 和 grid-auto-rows 属性定义了网格中的列和行。 grid-gap 属性设置元素之间的间距。居中和左对齐的关键是 justify-content 属性。当设置为“center”时，它将网格项放置在父容器内可用空间的水平中心。这可确保框居中，最后一行在网格末尾时向左对齐。

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