Question

我有一个我想要居中的DIV。没有定义的宽度或长度，因为页面被假定为具有所有窗口大小的通用（当您重新调整窗口大小时，页面调整）。我需要保留这个，同时以DIV为中心。

以下是我对视觉辅助的意思。

保存所有这些图像的DIV“容器”需要居中。在图片中，它与右侧的间隙保持对齐。

这样更容易查看，这里是jsfiddle中的代码。

#container{
    display:box;
    float:left;
    margin-top:40px;
    left:50%;
}
#thumb{
    display:box;
    float:left;
    top:0;
    left:0;
    margin:5px;
    padding:10px;
    background-color:rgba(102,102,102,0.5);}


<body>
<img src='background/001.JPG' class='background'/>
<div id='navigation'>
    <div>
    <ul id='menu'>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Albums</a></li>
        <li><a href='#'>Contact</a></li>
    </ul>
    </div>
    <div id='toggle'>
        <a href='#'>Hide All</a>
    </div>       
</div>
<div id='container'>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
</div>

</body>

Answer 1

首先，您不能拥有多个具有相同ID的元素。您有多个ID为thumb的元素。你不能这样做。改为使用类。

然后将缩略图的display设置为容器的inline-block和text-align到center：

#container {
    text-align: center;
}
.thumb {
    display: inline-block;
}

您的代码中有一些其他问题：

display: box你不太想要什么。您可能需要block代替。

left

top和position无效。
你似乎对float: left有一个奇怪的吸引力，在那里没有必要。
我需要将margin更改为padding以保持相同的间距。

<强> Look at the result.

Answer 2

保证金：0自动;在#container中，在margin-top之前：

另外，为什么在容器中使用float：left？

Answer 3

这应该可以解决问题。

#container {
   margin-left: auto;
   margin-right: auto;
}

Answer 4

除非为其指定宽度，否则不能将块元素居中。否则，浏览器将为该元素提供尽可能宽的宽度，这意味着它已经居中（左边空间为零，右边空间为零）。

使用min-width和/或max-width为元素指定一个比单个width值更灵活的定义宽度，然后为元素赋予margin: 1em auto样式将其水平居中于其父元素中可用的未使用宽度。

如何将此DIV（CSS / HTML）居中

4 个答案: