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集中它：问题是我需要浮动的替代方案：左侧工作到中心，所以它们都相互浮动。我目前所拥有的只是将它们漂浮在错误的浏览器宽度上，它们没有居中。

#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>更改为<span>并删除display:inline CSS指令。您也可以完全删除<div>或<span>提示，然后将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; }

浮动一堆div中心，同时保持动态宽度和高度

2 个答案: