我如何居中这个DIV (CSS/HTML)

我有一个想居中的div。没有定义宽度或长度，因为页面被认为是通用的所有窗口大小(当您重新调整窗口大小，页面调整)。我需要保持这个，而DIV居中

这里是我指的视觉辅助的照片。

https://i.stack.imgur.com/tL0gB.jpg

存放所有图像的DIV "container"需要居中。在图片中，它是左对齐的，右边有一个空白。

为了便于查看，下面是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>

首先，不能有多个具有相同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以保持相同的间距。

查看结果

margin: 0;在#container中，在margin-top:

之前

还有，为什么在容器中使用float: left ?

应该可以了。

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

除非你给它一个定义的宽度，否则你不能把块元素居中。否则，浏览器会给该元素尽可能多的宽度，这意味着它已经是居中的(左零空间和右零空间)。

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

相关内容

最新更新

热门标签：