将流体容器网格中最后一行元素居中对齐修正为左对齐，同时保持容器居中。

Question

我遇到了一个问题，无法将流体容器中 'ul' 元素的最后一行左对齐。我已经成功地使容器在页面上居中，但当它们没有完全填满时，它会居中最后一行元素。似乎找不到解决方案。

我在核心使用 Twitter Bootstrap，外部 div 使用 container-fluid。并像这样居中列表元素：

ul {
    text-align: center;
    list-style:none;
}

ul li {
    display: inline-block;
}

我尝试使用text-align: justify并通过margin将div居中，但它似乎不随页面的调整而移动。有什么建议吗？

这里有两张屏幕截图展示了正在发生的情况：

JS Fiddle 示例：http://jsfiddle.net/Z9uqQ/

最后一行应与 1 的同一垂直边缘左对齐。

- codeisforeva

---

你能否在jsfiddle、jsbin等地方发布一个示例呢？这将非常有帮助。 - elclanrs

注意：最后一行可能也有多个元素，如屏幕截图所示。因此，:last-child 不起作用。 - codeisforeva

我想我懂了，检查一下我的答案。 - elclanrs

http://jsfiddle.net/azNyk/ 是你所指的吗？ - Systembolaget

@Systembolaget 有时可能会有多个元素，所以 :last-child 并不总是适用的。 - codeisforeva

Answer 1

如果我理解正确，margin: 0 auto将会起作用：

ul {
    width: 90%;
    margin: 0 auto;
}

演示：http://jsfiddle.net/elclanrs/GdAvm/

- elclanrs

---

这不起作用，因为在容器调整大小时，内容不再居中。谢谢。 - codeisforeva

我已经添加了一张新的截图，展示了您的解决方案在使用图片时的效果。 - codeisforeva

请注意，它并没有将ul居中。它只是把所有东西留在左边。 - codeisforeva

抱歉，我不明白你的意思... 你能用实际图片和 Twitter Bootstrap 做一个例子来更好地调试吗？你可以使用 http://placekitten.com 上的图片来快速编写一个示例。 - elclanrs

不需要引导程序。http://jsfiddle.net/Z9uqQ/1/ 已更新。请注意，当您将输出容器向左拖动时，UL不会在容器中重新居中。 - codeisforeva

我已经做了一些测试，我认为你可能需要一些JavaScript，只使用CSS似乎找不到解决方案。 - elclanrs