Question

我已经阅读了许多关于如何在另一个div中居中包含未知数量的浮动div的未知宽度的div的帖子，但所有这些帖子都假设所包含的浮动div不会流到多行，或者它们不需要排成很好的列。

假设这个布局：

<div class="container">
    <div class="box">content</div>
    <div class="box">content</div>

    ... many more (unknown number) of div.box ...

    <div class="box">content</div>
    <div class="box">content</div>
</div>

其中div.box具有固定的高度/宽度，向左浮动使它们很好地排列，并在div.container重新调整大小时填充可用空间。我希望div.container能够居中。

如果我使用以下内容，div.box元素将很好地排列，div.container将很好地居中，但div的最后一行不会与其他行的左侧对齐。它们将集中在列中。

.container {
    text-align:center;
}

.box {
    display:inline-block;
    width: 200px;
    height: 200px;
}

div.container的宽度是可变的，所以使用这样的东西不是一个选项：

.container {
    width: 1000px;
    margin: 0 auto;
}

.box {
    float: left;
    width: 200px;
    height: 200px;
}

有任何想法或建议吗？

Answer 1

问题在于，由于容器具有动态宽度 - margin: 0 auto将无效。

我们可以使用media queries解决此问题。

<强> FIDDLE

因此，假设每个框的宽度为200px，媒体查询将如下所示：

@media (min-width: 210px) {
    ul{
        width: 200px;
    }
}

@media (min-width: 410px) {
    ul{
        width: 400px;
    }
}
...

...

现在已经到位了 - 容器div上的margin: 0 auto就像它应该的那样工作。

Answer 2

您可以使用box-sizing属性将填充和边框区域限制为内容框的尺寸， e.g。

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}

http://jsfiddle.net/eNT2d/3/

Answer 3

添加此

.container {
  text-align:center;
  margin: 0 auto;
}

并确保容器的父div的宽度为100％。

使包含未知数量的浮动div的DIV居中

3 个答案: