0

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

这是我对视觉辅助的意思的照片。

http://imgur.com/NZ6OSWn,LPkYzwM#1

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

只是为了更容易查看，这里是 jsfiddle 中的代码。

http://jsfiddle.net/fZ4CL/

#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>
4

4 回答 4

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不需要的地方有一种奇怪的吸引力。
  • 我需要将 a 更改margin为 apadding以保持相同的间距。

看看结果。

于 2013-03-24T21:19:38.333 回答
0

边距：0 自动；在#container 中，在margin-top 之前：

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

于 2013-03-24T21:04:51.660 回答
0

这应该可以解决问题。

#container {
   margin-left: auto;
   margin-right: auto;
}
于 2013-03-24T21:05:30.620 回答
0

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

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

于 2013-03-24T21:08:36.517 回答