html - 使 DIV 中的无序列表居中，同时保持最后一行 LI 向左调整

Question

使用最新的 Bootstrap，我有一个无序列表，其中包含像网格这样的图像:

<div id="featured-products" class="container">

      <ul>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
      </ul>

</div>

我用 text-align: center 将无序列表居中:

ul {
    list-style-type: none;
    text-align: center;
    margin-bottom: 0px;
    padding-left: 0;
    padding-right: 0;
}

li {
    display: inline;
    padding-left: 0px;
    padding-right: 10px;
}

问题是如果行不完整，即最后一行没有向左调整，即缺少列表项。

有没有办法将最后一行拉到左边，同时保持 ul 在 div 中居中？解决方案必须具有响应性。

Answer 1

居中列表容器，而不是它的内容。

举个例子

ul {
  max-width: 960px;
  margin: auto;
}

还可以考虑将 Mansonry 用于图片库 http://masonry.desandro.com/