将div放在div中

Question

我有一个100%宽的div,包含一个数字og较小的div"100x100px".

但我希望它们居中,以便当它们被迫在新行上开始时,左侧和右侧总是有相同的空间.我是以错误的方式绕过这个吗？

CSS:

.menuContainer {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
    background-color: #7144E0;
}
    .menuItem {
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: #F3FD4F;
        display: inline-block;
}

HTML:

<div class="menuContainer">
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
</div>

http://jsfiddle.net/craigzilla/yofu4md0/

Answer 1

添加text-align:center规则到.menuContainer

.menuContainer {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
    background-color: #7144E0;
    text-align:center; /* Added this */
}

演示