Question

我有很多包含内容的方框。每行的方框数根据浏览器窗口的宽度而变化。

我怎样才能使整个框的集合始终在页面上水平居中？

以下是参考：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。

Answer 1

我这样做

1 -

.centered {display：block;文本对齐：中心; }

2 -

.SEGMENT

删除浮动

添加display：inline-block

玩得开心

Answer 2

试试这个

.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;
}

DEMO

Answer 3

只有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>

Demo

Answer 4

根据宽度为容器设置不同的宽度：

http://jsfiddle.net/y6JpY/

@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像素边距）

这样，最终孤立的瓷砖也不会居中。

让动态宽度div始终位于另一个div中

4 个答案: