浮动一堆 div 居中，同时保留动态宽度和高度

Question

我有一个大 div。它包含一堆缩略图。我希望 div 内的缩略图在 div 内居中，并且 div 在页面上居中。但我还希望 div 的宽度是动态的，这样您就可以看到每个分辨率上的所有缩略图，并居中。我怎样才能做到这一点？

到目前为止，这是我所拥有的：

<div id="container">
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
</div>

我尝试使用此 css 将其居中： 问题是我需要一个 float:left 的替代方案，它可以居中，这样它们就可以彼此浮动。我目前所拥有的只是将它们向左浮动，因此在错误的浏览器宽度上，它们没有居中。

#container{margin:auto;width:80%}
.thumb{padding:60px;float:left}

关于如何做类似 float:center 的事情有什么想法吗？

Answer 1

首先，您不能为所有子级

提供相同的ID；；这是无效的 HTML。

我会做这样的事情：

#container{margin:0 auto;width:80%;text-align:center}
#container div{padding:60px;display:inline}

<div id="container">
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
</div>

或者，您可以将所有

更改为 并删除 display:inline CSS 指令。您还可以完全删除

或 想法，并将 padding 直接应用于 img< /代码> 标签。

编辑：看到另一个答案上发布的评论，看来我上面的答案仍然不能完全帮助你。这是您想要实现的行为吗？ http://jsfiddle.net/9KqQN/1

#container{margin:0 auto;width:80%;text-align:center}
#container span{display:inline-block;text-align:left}

<div id="container">
    <span>
        <img />
        <img />
        <img />
        <br />
        <img />
    </span>
</div>

Answer 2

在拇指 div 上使用 display: inline-block 。这使您可以像对待任何其他文本一样对待它们，但保留其固有的“盒子”大小：

#container {margin: auto; width: 80%; text-align: center; }
.thumb { height: 100px; width: 100px; padding: 60px; display-inline-block; }