Question

给出一个内容如此的容器：

<div id="container">

    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>   

</div>

#container {
    width: 600px;
    border: 1px solid #CCC;
}

#container .item {
    background: red;
    display:inline-block;
    width: 50px;
    height: 50px;
}

http://jsfiddle.net/zrhLt/

有没有办法用CSS（没有JS）自动居中等边距的项目。不必使用桌子？

由于

Answer 1

~~将text-align:center;添加到容器中心所有项目。~~

你不想使用一个表，但你仍然可以告诉浏览器将它呈现为一个表:-)那么这个CSS怎么样：

#container {
    width: 600px;
    border: 1px solid #CCC;
    display: table;
    border-spacing:20px 0; /* this is the value that controls the margin */
}

#container .item {
    background: red;
    display: table-cell;
    width: 50px;
    height: 50px;
}

Answer 2

你可以使用这样的边距：

#container {
    width: 600px;
    border: 1px solid #CCC;

}

#container .item {
    background: red;
    display:inline-block;
    width: 50px;
    height: 50px;
    margin-left: 1.4%;
    margin-right: 1.4%;
}

玩小提琴： http://jsfiddle.net/zrhLt/9/

如何在div中动态居中项目

2 个答案: