我如何居中這個DIV（CSS / HTML）
[英]How can I center this DIV (CSS/HTML)
問題描述
我有一個DIV，我想居中。 沒有定義寬度或長度，因為假定頁面對於所有窗口大小都是通用的（當您調整窗口大小時，頁面會進行調整）。 我需要保持此位置，同時使DIV居中。
這是我對視覺輔助的意思的照片。
http://imgur.com/NZ6OSWn,LPkYzwM#1
容納所有這些圖像的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>
4 個解決方案
解決方案1
1 已采納 2013-03-24 21:19:38
首先，不能有多個具有相同ID的元素。 您有多個ID為thumb元素。 你不能那樣做。 改用類。
然后將縮略圖的display設置為inline-block ，將容器的text-align到center ：
#container {
text-align: center;
}
.thumb {
display: inline-block;
}
您的代碼中還有其他錯誤：
-
display: box不太可能是您想要的。 您可能想要block。 - 除非設置了
position否則left和top均無效。 - 您似乎有一個奇特的
float: left在不需要的地方。 - 我需要將
margin更改為padding以保持相同的間距。
解決方案2
0 2013-03-24 21:04:51
保證金：0自動; 在#container中，在頁邊距頂部之前：
另外，為什么要使用float：留在容器中？
解決方案3
0 2013-03-24 21:05:30
這應該可以解決問題。
#container {
margin-left: auto;
margin-right: auto;
}
解決方案4
0 2013-03-24 21:08:36
除非為塊元素指定了定義的寬度，否則無法將其居中。 否則，瀏覽器將為該元素提供盡可能多的可用寬度，這意味着該元素已經居中（左側為零空間，右側為零空間）。
使用min-width和/或max-width為元素提供定義的寬度，該寬度比單個width值更靈活，然后為元素提供margin: 1em auto樣式將其水平居中於其父級中未使用的寬度內元件。
如何在 HTML 和 CSS 中的任何 div 中居中圖像？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.