我有很多包含内容的方框。每行的方框数根据浏览器窗口的宽度而变化。
我怎样才能使整个框的集合始终在页面上水平居中?
以下是参考: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。
答案 0 :(得分:1)
我这样做
1 -
.centered {display:block;文本对齐:中心; }
2 -
.SEGMENT
删除浮动
添加display:inline-block
玩得开心
答案 1 :(得分:1)
试试这个
.centered {
min-width:640px;
max-width:1920px;
margin-right:auto;
margin-left:auto;
display:inline-block;
text-align:center;
}
.segment {
display:inline-block;
height:300px;
width:300px;
margin:5px;
background-color:red;
}
答案 2 :(得分:1)
只有HTML / CSS很难完美地解决您的问题。这里提出了一个非常简单的JS解决方案。
<body>
<div class="centered">
<span id="segmentList">
<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>
</span>
</div>
</body>
<script type="text/javascript">
$('div.centered').width($('#segmentList').width());
<script>
答案 3 :(得分:-1)
根据宽度为容器设置不同的宽度:
@media screen { .centered { width: 620px } }
@media screen and (min-width: 930px) { .centered { width: 930px } }
@media screen and (min-width: 1240px) { .centered { width: 1240px } }
@media screen and (min-width: 1550px) { .centered { width: 1550px } }
@media screen and (min-width: 1860px) { .centered { width: 1860px } }
数字是310的倍数(每边300 + 5像素边距)
这样,最终孤立的瓷砖也不会居中。