我有很多带内容的盒子。每行盒子的数量会根据浏览器窗口的宽度而变化。
如何使所有的盒子在页面上始终水平居中显示?
以下是参考链接:FIDDLE
HTML:
<body>
<div class="centered">
<div class="segment">Content</div>
<div class="segment">Content</div>
<div class="segment">Content</div>
<div class="segment">Content</div>
<div class="segment">Content</div>
<div class="segment">Content</div>
<div class="segment">Content</div>
<div class="segment">Content</div>
<div class="segment">Content</div>
<div class="segment">Content</div>
<div class="segment">Content</div>
</div>
</body>
CSS:
body {
background-color:grey;
margin:0px;
padding:0px;
}
.centered {
min-width:620px;
max-width:1920px;
margin-right:auto;
margin-left:auto;
}
.segment {
float:left;
height:300px;
width:300px;
margin:5px;
background-color:red;
}
我可以接受JavaScript和jQuery的解决方案,但如果可能的话,我更愿意坚持使用HTML和CSS。