Question

基本上我想要一个由大小相等的div构建的页面，例如100x100，还有像200x100那样的变体。它们都浮动：向左调整以适应窗口的大小。问题是，我不知道如何让他们在那个场景中居中，有时说连续3次或其他时间7因为通常你在右边有更多的空间让它看起来偏离中心。提前谢谢！

Answer 1

Are you looking for something like this?在容器上设置自动边距会使其水平居中。从那里，您可以浮动或内联您的块，以便以您说话的方式显示它们。看看CSS和HTML：

<div class="container">
    <div></div>
    <div class="variant"></div>
    <div></div>
    <div></div>
    ...
</div>

这个HTML就像在语义上一样简单。理想情况下，我通常会将此作为无序列表，但由于您的标题在标题中提到了divs，我就朝着那个方向前进。

div.container div{
    border: solid 2px black;
    min-height: 100px;
    width: 100px;
    display: inline-block;
    background-color: white;
    vertical-align: top;
    margin: 10px;
}
div.container div.variant{
    width: 200px;
}
div.container{
    margin: auto;
    max-width: 620px;
    background-color: #ecefec;
    padding: 10px;
    font-size: 0;
}

<强> JS Fiddle

这里发生了什么

我们通过属性display: inline-block内联块元素;因此，我们需要制定一些额外的规则，以便在它们具有不同高度的情况下正确显示它们（这些将自动清除一行，与浮动元素不同）。

内联元素上的属性vertical-align:top确保它的排列方式使元素的顶部边框与其兄弟元素的顶部边框齐平。

属性font-size:0确保在计算块元素之间的间距时不考虑标记空白（否则包括一个div标记的关闭与另一个div标记的开放之间的每个空格）。

这应该实现你想要实现的目标。

<强>更新

在回答另一个问题时查看您的评论后，我们需要将text-align:center;添加到容器div的CSS中，因为这会将每一行放在容器中。

Example

Answer 2

我不太清楚你在追求什么（图片可能有帮助），但如果我理解正确，你应该能够使用inline-block而不是float来实现你的布局：

在你的div上设置display: inline-block，
在容器上设置text-align: center（或者justify）。

对此有所了解：

Answer 3

我有一个我认为符合您需求的解决方案。它使用媒体查询将容器宽度调整为适合当前视口宽度的块宽度的最大倍数。然后，该容器以自动边距为中心，其中的块只是左对齐。

由于容器始终是块宽度的精确倍数，因此容器内永远不会有多余的空间。容器本身也是居中的，因此两侧的间距将完全平衡。

计算媒体查询有点单调乏味，所以我更倾向于使用SASS，但如果你的块相当大，你不应该需要巨大的数量（阻止所需的媒体查询越少）。

Codepen example using SASS

如果你更喜欢LESS，或者只是简单的旧CSS，我很乐意提供转换。

Answer 4

在这个页面上有很多问题和答案，很难弄清楚OP真正需要什么，但这是我试图帮助的。建立在jsFiddle提供的漂亮Josh Burgess in his answer之上。我不确定他的jsFiddle是否已经完全是Kos或OP所追求的，但我想使用flexbox model的替代方法添加他的答案，因为这会增加许多其他选项，你可能会我想考虑一下。

首先，Flexbox模型在过去几年中经历了相当多的变化，目前正在进行一项全新的实施fully supported by Chrome and Opera and partially supported by a number of other major browsers。当支持使下面的示例工作所需的功能时，我相信它们应该适用于除FireFox之外的所有主流浏览器的当前版本。预测Firefox将为fully supporting the new flexbox model in version 22，即scheduled to be released on June 25, 2013。

现在这里有Josh Burgess jsFiddle的副本，描绘了与他提供的更新示例jsFiddle完全相同的外观和行为，但使用flexbox模型来完成此任务。

div.container {
    margin: auto;
    max-width: 620px;
    background-color: #ecefec;
    padding: 10px;
    font-size: 0;

    display: -webkit-flex;    /* Chrome */
    display: -ms-flexbox;     /* IE 10 */    
    display: flex;            /* Opera 12.1, Firefox 20+ */

    /* Chrome */
    -webkit-flex-flow: row wrap;
    -webkit-justify-content: center;

    /* IE10 */
    -ms-flex-flow: row wrap;
    -ms-justify-content: center;

    /* Opera 12.1, Firefox 20+ */
    flex-flow: row wrap;
    justify-content: center;
}

现在看看当我将justify-content值更改为：

时会发生什么

如果您不介意div不是特定的宽度，您甚至可以将它们设置为自动调整大小的弹性框，就像我在jsFiddle中所做的那样，它有效地转换了div {{1}进入width的。

min-width

无论如何，我认为这是非常强大的东西。而且，虽然我意识到它在所有主流浏览器中都无法完美运行的事实可能是任何人在当前实际实现这一目标时跳过的一大障碍，但我相信这个功能应该在有问题的页面，如OP的问题。

除此之外，也许，以防Josh Burgess answer仍然不是Kos或OP正在寻找的东西，一些提供的jsFiddles（当在支持它们的浏览器中查看时）可以用来解释什么确切地说，他们正在寻找。

Answer 5

你看起来像吗？

<强> HTML：

<div class="container">
    <div class="small"></div>
    <div class="large"></div>
    <div class="small"></div>
    <div class="mini"></div>
    <div class="small"></div>
    <div class="mini"></div>
    <div class="small"></div>
</div>

<强> CSS：

.container {
    text-align: center;
    letter-spacing:-0.25em;
    word-spacing: -0.25em;
}
.small, .large, .mini {
    display: inline-block;
    *display: inline;
    zoom: 1;
    height: 50px;
    letter-spacing:normal;
    word-spacing: normal;
}
.small {
    width: 25%;
    background: #f00;
}
.large {
    width: 50%;
    background: #0f0;
}
.mini {
    width: 12.5%;
    background: #00f;
}

Answer 6

如果我理解正确，您可以使用不同宽度的可变数量的元素，并且您希望在页面上水平对齐元素组。

如果是这种情况，那么对我有用的解决方案就是：

HTML：

<div class="container">
    <div class="outer">
        <div class="inner">
            <!-- your elements here -->
        </div>
    </div>
</div>

CSS：

.container {
    overflow: hidden;
}
.container .outer {
    float: left;
    position: relative;
    left: 50%;
}
.container .outer .inner {
    float: left;
    position: relative;
    left: -50%;
}

基本上，正在发生的事情是.outer div向右移动，使其左边缘位于其父元素的中间。然后，.inner向左移动50％，意味着.inner的中心与.outer的左边缘对齐。最后，无论.inner中元素的总宽度如何，.inner及其内容都将以屏幕为中心。

使用自动边距要求包含内容的元素具有已定义的宽度。这个解决方案以一些非语义标记为代价来解决这个问题。

这是一个演示实际的演示：

JsFiddle DEMO

Answer 7

<强> HTML：

<div id="container">
    <div class="small"></div>
    <div class="large"></div>
    <div class="small"></div>
    <div class="mini"></div>
    <div class="small"></div>
    <div class="mini"></div>
    <div class="small"></div>
</div>

<强> CSS：

* {
    margin: 0;
    padding: 0;
}
#container {
    margin: 0px auto;
    overflow: hidden;
    border: 1px solid #f00;
    letter-spacing:-0.25em;
    word-spacing: -0.25em;
    line-height: 0;
}
.small, .large, .mini {
    display: inline-block;
    *display: inline;
    float: left;
    zoom: 1;
    height: 50px;
    letter-spacing:normal;
    word-spacing: normal;
    line-height: auto;
}
.small {
    width: 100px;
    background: #f00;
}
.large {
    width: 200px;
    background: #0f0;
}
.mini {
    width: 50px;
    background: #00f;
}

<强> jQuery的：

resizeContainer();

function resizeContainer() {
    var containerWidth = 0;
    $('#container > div').each(function () {
        var self = $(this);
        var offset = self.offset();
        if (offset.top < 2) {
            containerWidth += self.width();
        } else {
            $('#container').css('width', containerWidth);
            return false;
        }
    });
}

中心x浮动量：左边divs水平

7 个答案: