我如何居中这个DIV（CSS / HTML）
[英]How can I center this DIV (CSS/HTML)
问题描述
I have a DIV that I would like centered. 
我有一个DIV，我想居中。 There is no defined width or length because the page is suppose to be versatile with all window sizes (as you re-size window, the page adjusts). 没有定义宽度或长度，因为假定页面对于所有窗口大小都是通用的（当您调整窗口大小时，页面会进行调整）。 I need to keep this, while centering the DIV. 我需要保持此位置，同时使DIV居中。
Here are photos of what I mean for visual aid. 这是我对视觉辅助的意思的照片。
http://imgur.com/NZ6OSWn,LPkYzwM#1 http://imgur.com/NZ6OSWn,LPkYzwM#1
The DIV "container" which holds all those images needs to be centered. 容纳所有这些图像的DIV“容器”需要居中。 In the picture it is left aligned with a gap on the right. 在图片中，它与左侧的间隙对齐。
Just so it's easier to view, here is the code in jsfiddle. 只是为了更容易查看，这是jsfiddle中的代码。
http://jsfiddle.net/fZ4CL/ 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 个解决方案
解决方案1
1 已采纳 2013-03-24 21:19:38
First of all, you can't have multiple elements with the same ID. 首先，不能有多个具有相同ID的元素。 You have multiple elements with an ID of thumb . 您有多个ID为thumb元素。 You can't do that. 你不能那样做。 Use classes instead. 改用类。
Then set the display of the thumbnails to inline-block and text-align of the container to center : 然后将缩略图的display设置为inline-block ，将容器的text-align到center ：
#container {
text-align: center;
}
.thumb {
display: inline-block;
}
A few other things wrong in your code: 您的代码中还有其他错误：
-
display: boxis very unlikely what you want.display: box不太可能是您想要的。 You probably wantblockinstead.您可能想要block。 -
leftandtophave no effect whatsoever unlesspositionis set.除非设置了position否则left和top均无效。 - You seem to have a strange attraction to
float: leftwhere it is unnecessary.您似乎有一个奇特的float: left在不需要的地方。 - I needed to change a
marginto apaddingto keep the same spacing.我需要将margin更改为padding以保持相同的间距。
解决方案2
0 2013-03-24 21:04:51
margin: 0 auto; 保证金：0自动; in #container, before the margin-top: 在#container中，在页边距顶部之前：
also, why use float: left in the container? 另外，为什么要使用float：留在容器中？
解决方案3
0 2013-03-24 21:05:30
This should do the trick. 这应该可以解决问题。
#container {
margin-left: auto;
margin-right: auto;
}
解决方案4
0 2013-03-24 21:08:36
You can't centre a block element unless you give it a defined width. 除非为块元素指定了定义的宽度，否则无法将其居中。 Otherwise the browser will give that element as much width is available, which means it's already centred (with zero space to the left and zero space to the right). 否则，浏览器将为该元素提供尽可能多的可用宽度，这意味着该元素已经居中（左侧为零空间，右侧为零空间）。
Use min-width and/or max-width to give the element a defined width which is more flexible than a single width value, and then give the element a margin: 1em auto style to centre it horizontally within the unused width available in its parent element. 使用min-width和/或max-width为元素提供定义的宽度，该宽度比单个width值更灵活，然后为元素提供margin: 1em auto样式将其水平居中于其父级中未使用的宽度内元件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.