css - 使用 CSS 网格在最后一行居中元素

<分区>

我正在尝试将底部的两个 li 元素(下图中的餐厅信息容器)置于设置为 display: grid 的 ul 列表中。我认为将 justify-items:center 添加到 ul 列表规则集会起作用，但它没有。我还尝试了 justify-content: center，但没有任何改变。是否有适用于最后一行中的元素的 CSS 网格的解决方案？

<ul id="restaurants-list"></ul>

/* ul element */
#restaurants-list {
  background-color: #f3f3f3;
  list-style: outside none none;
  margin: 0;
  padding: 30px 15px 30px;
  display: grid;
  grid-gap: 20px;
  justify-items: center;
}

#restaurants-list li {
  background-color: #fff;
  border: 2px solid #ccc;
  font-family: Arial, sans-serif;
  padding: 10px;
  max-width: 270px;
}

最佳答案

justify-items: center; 对齐元素在其网格单元格内 - 一行中没有对齐项。

我建议不要在这里使用 display:grid 而是像这样的 display:inline-block 元素:

#restaurants-list {
   display:block;
   text-align: center;
   ...
}

#restaurants-list > li {
   display:inline-block;
   ...
}

关于css - 使用 CSS 网格在最后一行居中元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52021933/

上一篇：css - 从显示中移除图像后重新定位表单

下一篇：CSS - 为什么隐藏 flexbox 的开始？以及如何解决保持元素居中？

相关文章：

html - 无论是否存在滚动条，如何使 tbody 宽度固定？

css - 使用 Espresso 在单行和多行 CSS 之间切换

css - 向纯 CSS slider 添加更多图像

html - 无法居中有序列表标题

html - Bootstrap 4 中的导航栏

css - 针对不支持具有功能查询的 CSS 网格的浏览器

css - 为什么我的 css 网格没有包含它的子元素？

html - 使用 css 网格的元素未在移动设备上填满整个屏幕宽度

html - CSS:网格行的内容溢出页面

html - minmax() 默认为最大值