将宽度未知的div居中，同时在内部左对齐

Question

这是我的html/css代码。请水平移动边框，直到最后一行包含的元素少于上面的行。

http://jsfiddle.net/wb5kT/

问题从这里开始。我确实想把整个东西水平居中，这样从页面边框到文本的左右距离就是一样的。但是，最后一个可见行应该左对齐。我事先不知道视口的宽度是多少，或者元素的总数。

向.images添加"text-align: left“会将最后一行中的元素向左对齐，但会破坏整个”居中对齐“。示例：http://jsfiddle.net/dgLQC/1/

在不使用表的情况下可以做到吗？

IE8或更低版本和旧版本的其他浏览器可以忽略。

Answer 1

将float:left放入.thumb。

看这个，http://jsfiddle.net/C5Pev/

更新：

我的错，上面的代码并没有像想要的那样工作。一种可能的解决方法是，

http://jsfiddle.net/C5Pev/7/

Answer 2

我不确定我是否正确理解了您的问题，但似乎您需要将最后一行(两个div)中的文本向左对齐，同时保持所有其他行的文本居中：

你可以为它应用一个类：

.alignLeft {
    text-align: left;
}

并将这个类传递给最后两个div。

这是Fiddle Example!

编辑：

你的问题应该换个说法，它会导致关于你的目标是什么的错误结论，但这是你正在寻找的吗：

查看此Fiddle Example!

相关CSS更新：

.thumb {
  float: left;              // align divs to the left of each other
  text-align: center;       // center text inside the div
  position: relative;
  border: 1px solid #D9D9D9; // view the blocks, not needed
  margin: 1px;               // get some distance between blocks, not needed
  font-size: 10px;           // small text to view that's centered, not needed
}

提示：水平收缩，直到你逐行得到3个块，这样就有了两个div，文本I在最后一行！一个人坐在最后一排。

Answer 3

我认为即使使用表格也不能做到这一点；一旦您的内容对于容器来说太宽，容器将采用其父容器的宽度，即使内容恰好被包装成适合较小的宽度。

顺便说一句，为了确保元素的最后一行(假设超过一行)不完整，请选择质数个元素。