在一个div中居中一组div div

Question

是否有可能将一组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从其他相关问题，也许我用他们错了，但他们不工作。

Answer 1

您可以添加text-align：

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

和display: inline-block，你必须从这个CSS规则删除float：

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

演示

http://jsfiddle.net/EdHS9/

Answer 2

是的，这是可能的。

所有您需要做的就是制作div元素inline-block，这样他们会像内联元素一样响应text-align:center。

这里是一个演示的小提琴。

http://jsfiddle.net/