如何使用 CSS 网格将最后一行左对齐的框居中？-css教程-PHP中文网

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

Mary-Kate Olsen

发布： 2024-12-17 00:36:26

原创

292 人浏览过

How to Center Boxes with a Left-Aligned Last Row Using CSS Grid?

最后一行左对齐的居中框

处理动态元素列表时，在对齐最后一行的同时实现居中布局可能具有挑战性左边的元素。虽然 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></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

登录后复制

使用此解决方案，无论列表中有多少元素，框都保持水平居中，而最后一行向左对齐。

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