我该如何居中此DIV（CSS/HTML）

我有一个DIV，我想集中。没有定义的宽度或长度，因为该页面适用于所有窗口大小（当您重新调整窗口大小，页面调整时）。我需要保持这一点，同时集中DIV。我该如何居中此DIV（CSS/HTML）

这里是我的视觉照片的意思的照片。

的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>

来源

2013-03-24 John Doe

首先，不能有多个具有相同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.

来源

2013-03-24 21:19:38 icktoofay

嘿icktoofay，谢谢你的提示。自从我搞砸了一段时间以来已经有一段时间了。您的解决方案与拇指正在居中的小小问题完美配合。有什么解决办法吗？我仍然希望大拇指从左到右而不是居中。 – 2013-03-24 22:07:51

@JohnDoe：哦，我认为那是你想要的效果。如果我现在正确地理解了你，你希望它现在调整大小，除了缩略图无法填充的任何额外空间将分布在容器的左侧和右侧之间吗？不幸的是，我不知道该怎么做。抱歉。 – icktoofay 2013-03-24 22:41:00

这很好。我可以像这样工作，更重大的问题已解决！再次感谢：） – 2013-03-24 23:11:47

余量：0汽车;在#container中，在margin-top之前：

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

来源

2013-03-24 21:04:51 Anonymous

这应该可以做到。

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

来源

2013-03-24 21:05:30 fvgs

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

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

来源

2013-03-24 21:08:36 Bobulous

我该如何居中此DIV（CSS/HTML）

回答

相关问题