出于某种原因，我似乎无法在页面中将此列表元素居中。它包含三个大小相同的盒子，我希望它们始终位于中心。
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>
最佳答案
要使 margin: auto 正常工作，您的元素需要以某种方式指定给它们的宽度(通常通过 width)。使事物自动缩放的常用解决方案是 display: inline-block;(尽管 flexbox 在支持时使这很多更容易):
.box-container {
display: inline-block;
text-align: left;
}
然后你给它的父元素 text-align: center;。或者，width: 300px;(可能稍作调整或删除空格)在这里似乎可以很好地工作；这取决于您的实际布局。
body 不需要 width: 100%;。
关于html - 页面中的居中列表 <div>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20415785/