在一個div中居中一組div div

是否有可能將一組div分隔在一個div中，因此它看起來像這樣？在一個div中居中一組div div

http://oi49.tinypic.com/1yo2dh.jpg

我不知道你能做到這一點，而不使用的表。

現在我得到這個HTML：

<nav class="imagemenu"> 
    <div id="categories"> 
     <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> 
     <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> 
     <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> 
     <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>  
     <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> 
     <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> 
     <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> 
     <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>   
     <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> 
     <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> 
    </div> 
</nav>

而這個CSS：

.home-menu { 
    width:780px; 
    height: 340px; 
    margin-top:10px; 
    padding: 20px; 
    background-color:#CCC; 
} 

#categories { 
    width:740px; 
    height:340px; 
    margin:0 auto; 
    background-color:#333; 
} 

.cata { 
    width:150px; 
    height:100px; 
    margin-bottom: 20px; 
    float:left; 
    background-color:#FFF; 
    opacity:0.5; 
} 
.cata { 
    opacity:1.0; 
}

大小仍取決於但有一種可能的選擇很容易地居中在類別DIV所有CATA的？

我嘗試了一些選項，如overflow和text-align:center從其他相關問題，也許我用他們錯了，但他們不工作。

來源

2013-03-12 RChellz

您可以添加text-align：

#categories { 
    […] 
    text-align:center; 
}

和display: inline-block，你必須從這個CSS規則刪除float：

.cata{ 
    […] 
    display:inline-block; 
}

演示

http://jsfiddle.net/EdHS9/

來源

2013-03-12 13:07:24 insertusernamehere

謝謝！我看到我用錯了，我現在明白了：D – RChellz 2013-03-12 13:12:49

歡迎來到SO。我很高興能夠提供幫助。注意：事件處理程序實際上是「onclick」而不是「onClick」。 – insertusernamehere 2013-03-12 13:18:04

@RChellz，你應該將其標記爲答案。 :) – Jess 2013-03-12 15:35:39

是的，這是可能的。

所有您需要做的就是製作div元素inline-block，這樣他們會像內聯元素一樣響應text-align:center。

這裏是一個演示的小提琴。

http://jsfiddle.net/

來源

2013-03-12 13:07:54 Bart

謝謝你！我現在明白它的功能:) – RChellz 2013-03-12 13:13:47

你實際上並沒有包含一個小提琴的鏈接。 – abalter 2015-10-12 15:11:13

在一個div中居中一組div div

回答

相關問題