Question

出于某种原因，我似乎无法将此列表元素置于页面中心。它包含三个大小相同的盒子，我希望它们始终坚持到中心。

body {
    width: 100%;
}

.boxes {
    display: block;
    margin: 0 auto;
}

.box-container {
    display: block;
    margin: 0 auto;
    border: 1px solid blue;
}

.all {
    float: right;
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px 10px 10px 10px;
}

.clear {
    clear: both;
}

<body>
    <div class="box-container">
        <div class="box1 all"></div>
        <div class="box2 all"></div>
        <div class="box3 all"></div>
        <div class="clear"></div>
    </div>
</body>

Answer 1

要使margin: auto起作用，您的元素需要以某种方式给予它们宽度（通常通过width）。使事情自动扩展的常用解决方案是display: inline-block;（虽然flexbox使得很多在支持时更容易）：

.box-container {
    display: inline-block;
    text-align: left;
}

然后你给它的父text-align: center;。或者，width: 300px;（可能稍作调整或删除空格）似乎可以在这里运作良好;这取决于你的实际布局。

顺便说一下，

body不需要width: 100%;。

Answer 2

对于您想要水平居中的所有内容，您应将其margin-left和margin-right设置为'auto'。

Answer 3

给你的盒子容器一个宽度：

CSS

.box-container {
    display: block;
    margin: 0px auto;
    width: 360px;
    border: 1px solid blue;
}

此处示例：http://jsfiddle.net/82WCU/

Answer 4

从每个float: right课程中删除all。这导致盒子向右移动。将box-container中心对齐（这会将它们带到中心），然后将每个框的显示更改为inline-block。

 .box-container {
     display: block;
     margin: 0 auto;
     border: 1px solid blue;
     text-align: center;
 }

 .all {
     width: 100px;
     height: 100px;
     background: red;
     margin: 10px 10px 10px 10px;
     display: inline-block;
 }

Answer 5

尝试：

.box-container {
    text-align:center;
}
.all {
    display:inline-block;
}

注：

inline-block在元素之间留下空白区域。要删除此空间，请在同一行上写入元素，而不是将它们写在单独的行上。

变化：

到

<div class="box-container">
        <div class="box1 all"></div><div class="box2 all"></div><div class="box3 all"></div>
</div>

DEMO here.

Answer 6

尝试使用它完美无缺：

<强> HTML

<body>
    <div class="box-container">
        <div class="box1 all"></div>
        <div class="box2 all"></div>
        <div class="box3 all"></div>
        <div class="clear"></div>
    </div>
</body>

<强> CSS

body {
    width: 100%;
}

.boxes {
    display: block;
    margin: 0 auto;
}

.box-container {
    display: block;
    margin: 0 auto;
    border: 1px solid blue;
}

.all {
    background: none repeat scroll 0 0 red;
    float: right;
    height: 100px;
    margin-right: 13%;
    width: 100px;
}

.clear {
    clear: both;
}

在页面</div>中居中列表<div>

6 个答案: