4

是否可以将一组 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;
}

大小仍然取决于，但是否有可能的选项可以轻松地将所有 cata 集中在类别 div 中？

我尝试了一些选项overflow，例如text-align:center其他相关问题，也许我用错了，但它们不起作用。

4

2 回答 2

15

您可以添加text-align：

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

并且您必须从此 CSS 规则display: inline-block中删除：float

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

演示

http://jsfiddle.net/EdHS9/

于 2013-03-12T13:07:24.813 回答
1

对的，这是可能的。

您需要做的就是制作div元素inline-block，以便它们能够响应text-align:center类似的内联元素。

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

http://jsfiddle.net/

于 2013-03-12T13:07:54.603 回答