html - 在一个 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 中的所有目录居中？

我从其他相关问题中尝试了一些选项，例如 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/