1

我已经阅读了许多关于如何将未知宽度的 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;
}

有什么想法或建议吗？

4

3 回答 3

2

这里的问题是因为容器具有动态宽度 -margin: 0 auto不起作用。

我们可以通过使用这个来解决这个media queries问题。

小提琴

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

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

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

...

现在这已经到位 -margin: 0 auto在容器 div 上可以正常工作。

于 2013-06-26T07:17:15.920 回答
0

You can use the box-sizing property to constrain the padding and border areas to the dimensions of the content box, e.g.

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

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

于 2013-06-26T07:09:46.590 回答
0

添加这个

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

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

于 2013-06-26T07:23:08.890 回答