html - 在 div 内居中 div

Question

我有一个 100% 宽的 div，其中包含一个数字和较小的 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 */
}

Demo