在容器内居中 div

Question

我有多个较小的固定大小的 div 浮动在容器 div 内。我希望它们等间距，以便整个块给人以居中对齐的印象。

Right now they are aligned to the left（我知道这就是 float 的工作原理）。我知道这不太可能，但只是想要一些技巧，这样我就可以实现同样的目标。

One way to do that 是计算必要的宽度（假设我需要每行 3 个 div，每个 100px 宽和 10px 边距。所以容器的总宽度应该是 100*3+60）并将该宽度应用于容器 div并设置边距自动。

#container {
    width: 360px;
    margin: 0px auto;
}
.items { /* these are smaller divs */
    width: 100px;
    margin: 10px;
    float: left;
}

但是除非我专门为不同的媒体设置宽度，否则这在不同的屏幕尺寸下看起来不太好。

Another way is to use the flex display.

#container {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
}
.items { /* these are smaller divs */
    flex: 0 0 auto;
    width: 100px;
    margin: 10px;
}

它几乎达到了我的目的，但问题是当您在底行中有多个 div 时，它只是将第二个 div 放在最右侧，而不是在第二列下对齐（这也是我知道的预期行为，没有任何问题）。

那么，对于我想要实现的目标，有什么技巧/窍门吗？

更新（针对重复报告）： 另一个问题的解决方案（报告与此问题相同）使用固定容器宽度，而我在上面提到我不想固定容器宽度。因此，该解决方案不是我要寻找的解决方案。

下面的 Josh 提到了完美运行的解决方案，只是更改了 justify-content: space-around ，这样即使窗口变窄，内容也能保持居中。

Answer 1

那么，对于我想要实现的目标，有什么技巧/窍门吗？

这绝对是一个 hack，但它似乎有效。您可以添加一些带有height 或0 的空弹性框项目作为占位符。这样做时，将按预期计算 flexbox 项的位置，因为空的 flexbox 项的宽度将被考虑并填充空间。

空弹性盒项目的最小数量应该等于一行中弹性盒项目的最大数量减一。当然，您可以随时添加更多……以防万一。

在下面的示例中，我使用了:empty pseudo class 来选择空的占位符弹性框项目。

Updated Example

相关的 CSS：

.items:empty {
  visibility: hidden;
  height: 0;
  width: 100px;
  margin: 0 10px 0;
}

完整的 HTML/CSS：

#container {
  background-color: #000;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 25px auto;
}
.items {
  flex: 0 0 auto;
  width: 100px;
  margin: 10px;
}
#item1 {
  background-color: #F00;
}
#item2 {
  background-color: #0F0;
}
#item3 {
  background-color: #00F;
}
#item4 {
  background-color: #ABC;
}
#item5 {
  background-color: #A00;
}
#item6 {
  background-color: #6AF;
}
#item7 {
  background-color: #07A;
}
#item8 {
  background-color: #A79;
}
#item9 {
  background-color: #AF4;
}
#item10 {
  background-color: #FF4;
}
.items:empty {
  visibility: hidden;
  height: 0;
  width: 100px;
  margin: 10px;
  margin-top: 0;
  margin-bottom: 0;
}

<div id="container">
    <div id="item1" class="items">a</div>
    <div id="item2" class="items">b</div>
    <div id="item3" class="items">c</div>
    <div id="item4" class="items">c</div>
    <div id="item5" class="items">c</div>
    <div id="item6" class="items">c</div>
    <div id="item7" class="items">c</div>
    <div id="item8" class="items">c</div>
    <div id="item9" class="items">c</div>
    <div id="item10" class="items">c</div>
    <div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div>
</div>

Answer 2

要使这样的 div 居中，您需要将它放在这样的容器中。 所以我添加了一个带有最大宽度的class holder 和margin: 0 auto，所以它在容器内居中。 Fiddle

所以物品必须

Answer 3

希望你可以使用JQuery。

你可以设置：

#container {
    width: 100%;
}

.items {
    float: left;
    width: 100px;
    margin: 10px 0px;
}

加载和调整页面大小后，您可以执行计算和设置边距的函数

function setMargin() {
    cWidth = $('#container').width();
    iWidth = $('.items').width();

    totalItems = $('.items').length;
    itemsPerRow = parseInt(cWidth / iWidth);

    if(totalItems < itemsPerRow) {
        space = cWidth - iWidth * totalItems;
        margin = space/(totalItems+1);
    } else {
        space = cWidth - iWidth * itemsPerRow;
        margin = space/(itemsPerRow+1);
    }

    $(".items").css("margin-left", margin+"px");

}