Question

我有一个100％宽的div，其中包含一个数字较小的div＆＃34; 100x100px＆＃34;。

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

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

Answer 2

添加

text-align: center;

在menuContainer中

。

直播演示：http://jsfiddle.net/yofu4md0/4/

之前：

enter image description here

之后：

enter image description here

Answer 3

我不能做到这一点，但在我现在打开的项目中，我使用两个div来集中页面上的所有内容，如下所示：

.outer {
    width: 100%;
}

.inner {
    display: table;
    margin: 0 auto;
    text-align: center;
}

希望这可以帮到你。我不认为text-align：center是必要的。

刚看了那个演示，看起来很酷：D

将div放在div中

3 个答案:

Demo