Question

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

http://jsfiddle.net/wb5kT/

问题从这里开始。我确实希望将整个事物水平居中，因此从页面边框到文本的左右距离将是相同的。但是，最后一个可见行应该对齐左侧。我事先不知道视口的宽度或元素的总数。

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

可以不使用表格来完成吗？

可以忽略IE 8或更低版本以及其他浏览器的旧版本。

Answer 1

将float:left放入.thumb。

请参阅此http://jsfiddle.net/C5Pev/

<强>更新

我的不好，上面的代码不按预期工作。可能的解决方法是，

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

Answer 2

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

您可以为此申请一个类：

.alignLeft {
    text-align: left;
}

并将该课程提供给最后两个div。

以下是Fiddle Example!

EDITED：

你的问题应该被重新定义，这会导致你的目标是错误的结论，但这正是你要找的：

请参阅此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带有文本我在最后一行！单独在最后一行。

Answer 3

我认为即使使用表格也不能做到这一点;一旦你的容器内容太宽，容器就会假设它的父级宽度，即使内容恰好被包裹起来以适应更小的宽度。

顺便说一下，为了确保元素的最后一行（假设多行）不完整，请选择素数元素。

将未知宽度的div居中，同时将左边对齐

3 个答案:

EDITED：