在容器内居中 div

Question

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

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

One way to do that 是计算必要的宽度（假设我每行需要 3 divs，每行 100px 宽，10px 边距。所以容器的总宽度应该是 100*3+60 ) 并将该宽度应用到容器 div 并设置 margin auto.

#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 放在最右边，而不是对齐在第二列下（这也是我所知道的预期行为，不是任何问题）。

那么，有什么tricks/hacks是我想达到的目标吗？

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

下面的 Josh 提到了完美的解决方案，仅更改了 justify-content: space-around 以便即使 window 变窄，内容也保持居中。

Answer 1

要使 div 居中，您需要将它放在这样的容器中。所以我添加了一个 class holder 和一个 max-width 和 margin: 0 auto 所以它在容器内居中。 Fiddle

因此项目必须

Answer 2

希望你能使用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");

}

Answer 3

So, are there any tricks/hacks for what I want to achieve?

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

空 flexbox 项目的最小数量应等于一行中 flexbox 项目的最大数量减一。当然，你总是可以添加更多..以防万一

在下面的示例中，我使用 :empty pseudo class 到 select 空占位符 flexbox 项目。

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>

在容器内居中 div

Centering divs inside a container

css

flexbox