使内容中心
我有以下问题。我有一个响应的容器，所以它将是浏览器的宽度。或者当浏览器足够大时，它旁边会显示一个侧边栏。
在这个div中，我有大约10个具有以下css的项：
display:block;
width:200px;
height: 200px;
background: tomato;
margin: 10px;
float:left;所以他们形成了一个网格。
此时发生的情况是，例如，当容器div为440 At宽度时。他们将在每一行上很好地发挥2。但是当容器的宽度是600时。在左边还有一个很大的白色区域。
现在我想把它们集中起来。因此，2应该集中在容器中。我想通过添加另一个容器来实现这一点，扭曲元素并给它一个空白:auto；但这不起作用：
小提琴：http://jsfiddle.net/kqvcnugs/
那么，我如何确保项目总是在中间？
提前感谢！
回答 4
Stack Overflow用户
发布于 2015-11-05 13:39:18
你是说这个吗？http://jsfiddle.net/kqvcnugs/7/
在您的示例中，只需设置为a display: inline-block;和parent div text-align: center;即可。
但简短的描述是：
.parent { text-align: center; }
.children { display: inline-block; }祝你好运！！)
像这样：堆叠溢流柱
Stack Overflow用户
发布于 2015-11-05 13:35:44
您可以使用CSS3柔性盒布局。
- 父容器上的
justify-content: center将它水平地对齐到中心。 flex-wrap: wrap将确保块换到下一行，而不是调整大小。
body {
width: 100%;
background: blue;
}
div {
background: red;
overflow: hidden;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
a {
display: block;
width: 200px;
height: 200px;
background: tomato;
margin: 10px;
float: left;
}<body>
<div>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</div>
</body>
Stack Overflow用户
发布于 2015-11-05 13:36:55
不使用float，您可以使用display:inline-block;，然后将text-align:center;交给父元素。
body{
width: 100%;
background: blue;
}
div {
background: red;
overflow:hidden;
/* Add text-align:center; */
text-align: center;
}
a{
/* Change to display:inline-block; remove float */
display:inline-block;
width:200px;
height: 200px;
background: tomato;
margin: 10px;
}<body>
<div>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</div>
</body>
小提琴手
https://stackoverflow.com/questions/33545886
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号