html - 中心 x 浮动量：水平左 div

Question

基本上，我希望有一个由相同大小的 div 构建的页面，例如 100x100，但也有类似 200x100 的变体。它们都浮动：向左调整以相应地调整窗口大小。问题是，我不知道如何让它们在那种情况下居中，比如有时连续 3 个或其他时间 7 个，因为通常你会在右侧有更多空间使其看起来偏离中心。提前致谢！

Answer 1

你在寻找这样的东西吗？ 在容器上设置自动边距将使其水平居中。从那里，您可以浮动或内联您的块，以便以您所说的方式显示它们。看一下 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小提琴

这里发生了什么

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

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

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

那应该完成您想要实现的目标。

更新

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

例子

Answer 2

我不太确定你在追求什么（一张图片可能会有所帮助），但如果我理解正确，你应该能够使用inline-blocks 而不是floats 来实现你的布局：

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

一些阅读：

• http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
• http://www.ternstyle.us/blog/float-vs-inline-block

Answer 3

这个页面上有很多问题和答案，很难弄清楚 OP 真正想要什么，但这是我的帮助尝试。建立在Josh Burgess 在他的回答中提供的漂亮的jsFiddle 之上。我不确定他的 jsFiddle 是否已经完全是 Kos 或 OP 所追求的，但我想通过使用flexbox 模型的替代方法添加到他的答案中，因为这增加了很多您可能想要的其他选项考虑到。

首先，flexbox 模型在过去几年中发生了相当大的变化，一个全新的实现目前已被 Chrome 和 Opera 完全支持，并部分被其他一些主要浏览器支持。在支持使下面的示例工作所需的功能时，我相信它们应该在除 FireFox 之外的所有当前版本的主要浏览器中工作。预计 Firefox 将在 22 版中全面支持新的 flexbox 模型，该模型计划于 2013 年 6 月 25 日发布。

现在这里是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值更改为时会发生什么：

• 间隔
• 环绕空间
• flex-start或flex-end

如果您不介意 div 不是特定宽度，您甚至可以将它们设置为自动调整弹性框的大小，就像我在这个jsFiddle中所做的那样，这有效地将 div 的width's 变成min-width's。

div.container div {
  -webkit-flex: auto;        /* Chrome */
  -ms-flex: auto;            /* IE10 */
  flex: auto;                /* Opera 12.1, Firefox 20+ */
}

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

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

Answer 4

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

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

计算媒体查询有点乏味，所以我更喜欢用 SASS 来做，但如果你的块相当大，你不应该需要大量的媒体查询（块越大，需要的媒体查询就越少）。

使用 SASS 的 Codepen 示例

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

Answer 5

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

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

基本上，发生的事情是.outerdiv 向右移动，使其左边缘位于其父元素的中间。然后，.inner向左移动 50%，这意味着 的中心.inner与 的左边缘对齐.outer。最后，.inner它的内容将在屏幕上居中，而不管.inner.

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

这是一个演示，展示了它的实际效果：

JsFiddle DEMO

Answer 7

你看起来像吗？

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