始终在画廊中居中缩略图

Question

这是我对主题做出的一个小问题：http://jsfiddle.net/Z67p4/

所以，我的问题是 - 如果将来动态生成内容，我如何使缩略图始终在画廊中居中？即使连续少于四个缩略图，它们也应该居中，但也应该在它们之间有一个排水沟。

我试图摆弄margin: auto，但我无法理解。

Answer 1

在容器上试用text-align:center

http://jsfiddle.net/Z67p4/9/

Answer 2

两个修正：

修复一个：

将text-align:center;添加到容器类

修复二：

在容器类中删除display:inline-block;。它导致您的容器类以内联方式显示（如文本），这样就可以证明它是正确的。

为了表明这一点，我在容器类上添加了一个bg颜色，使其保持原始页边距的60％。 As you can see，尽管有一个“自动”水平边距，但div从左边缘开始占据屏幕的60％。

---

三项建议：

建议一：

如果您不希望缩略图中的文字居中，请务必添加text-align:left;。 text-align会影响目标元素的所有子元素，这意味着具有container类的div的每个子元素都将居中。

建议二：

真的更像是一种宠儿......

尝试找到一种方法来定义内容元素（缩略图）的大小而不使用百分比。通过使用不同的，精心调整大小的元素，您的页面将能够缩放到不同的屏幕，这些元素将根据查看大小居中。元素中心和规模可能过度。

建议三：

为容器添加最小宽度。这样，您就不必担心由于基于百分比的容器，您的元素是否可能溢出。

---

Here是修复修补程序的版本以及我的建议。我评论了我所做的每一项改变。