在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/

Answer 2

ul {         list-style-type：none;         text-align：left; //这将使最后一行对齐;         margin-bottom：0px;         padding-left：0;         padding-right：0;         宽度：800像素;         保证金：0自动; //这将以页面为中心;     }

li {
    display: inline-block;
    padding-left: 0px;
    padding-right: 10px;
    background:red;
    width:100px;
    height:100px;
}

使用制作中心到页面，而不是使用左对齐使最后一行表现得像你想要的那样。

http://jsfiddle.net/a9tmhuaf/1/