我該如何居中此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）

回答

相關問題