在保持动态宽度和高度的同时浮动一堆 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

首先，你不能给所有的孩子<div>提供相同的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>

或者，您可以将所有 <div>s 更改为 <span>s 并删除 display:inline CSS 指令。您也可以完全删除<div> 或<span> 想法，只需将padding 直接应用于img 标记。

编辑：看到 cmets 在另一个答案上发布，看起来我上面的答案仍然不能完全帮助你。这是你想要完成的行为吗？ 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。这使您可以像对待任何其他文本一样对待它们，但保留它们固有的“boxiness”来调整大小：

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