收缩包装并居中内联块元素的容器

Question

我在几行上有一堆内联块元素，我想水平居中。 inline-block 元素都具有相同的固定大小，但我希望居中能够处理页面大小调整以及添加或删除元素。

为了清晰起见，我已经剥离了 html/css 并删除了居中的尝试。在http://jsfiddle.net/fe25H/1/

如果您调整结果窗口的大小以使第三个 inline-block 元素下降，则容器会填充宽度，我们会得到：

-----------------BODY------------------
|                                     |
||-------------CONTAINER-------------||
||-INLINEBLOCK---INLINEBLOCK--       ||
|||____________||____________|       ||
||-INLINEBLOCK--                     ||
|||____________|                     ||
||___________________________________||
|_____________________________________|

而不是这样：

-----------------BODY------------------
|                                     |
|   |----------CONTAINER---------|    |
|   |-INLINEBLOCK---INLINEBLOCK--|    |
|   ||____________||____________||    |
|   |-INLINEBLOCK--              |    |
|   ||____________|              |    |
|   |____________________________|    |
|_____________________________________|

根据 ptriek 关于 JavaScript 解决方案的回答进行编辑：

Ptriek 的代码是一个有用的起点；它适用于特定情况，但不适用于一般情况。我大部分都将它重写为更灵活（参见http://jsfiddle.net/fe25H/5/）。

Answer 1

想了想，同意上面Wex的评论。

所以我摆弄了一个 JavaScript 解决方案 (jQuery) - 我不是这方面的专家，所以代码可能会有所改进 - 但我想它正是你需要的：

var resizeContainer = function () {
    var w_window = $(window).width();
    var w_block = $('.inlineblock').width();
    if (w_window < w_block * 3 && w_window >= w_block * 2) {
        $('.container').width(w_block * 2);
    } else if (w_window < w_block * 2) {
        $('.container').width(w_block);
    }  else {
        $('.container').width(w_block * 3);
    } 
};


$(document).ready(resizeContainer);
$(window).resize(resizeContainer);

body {
    text-align:center;
}
.container {
    display: inline-block;
    background-color: #aaa;
    text-align:left;
}
.inlineblock {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: #eee;
}

<div class='container'>
    <div class='inlineblock'></div>
    <div class='inlineblock'></div>
    <div class='inlineblock'></div>
</div>

http://jsfiddle.net/ptriek/fe25H/4/

Answer 2

所陈述的问题是，就我的 CSS 知识而言，纯 CSS 无法完美解决。

Mike M. Lin的回答是一个非常巧妙的方法，我喜欢这个创意，但是我可以扩展它的一些错误。

注意：如果有人找到通用解决方案，请告诉我们，因为没有人做过。 Etsy、亚马逊、Redbubble，在任何地方都看不到这一点......

---

1)

您不需要“2 减去 div 项数组的长度”，这对于大量 n 项可能会在计算上变得昂贵。相反，作为一个近似规则，您需要足够的占位符“块”来在容器中创建新行。其实占位符的个数是（伪代码）：

let n = number of block items to display
let n_max = number of block items that fit into one row
let n_ph = number of "placeholder" block items

/*if number of items exceeds max number for a row (starts a new line), then 
 you'll need to start another line with n_max - 1 placeholders*/
if n >= n_max then
    n_ph = n_max - 1
end if

//you don't need any placeholders if number of items fills all rows completely
if n % n_max == 0 then
    n_ph = 0
end if

注意我省略了 n 的情况。这很困难，您必须在 n 时使用您的 n_ph 值。 如果您需要 n_ph 来处理不同的窗口大小，我会考虑添加一个窗口宽度观察器，并为您的“响应式”带宽添加或删除一个占位符。这很痛苦，但你可能永远不会有 n ，或者，你的 n_max 很小，“手动泰勒”并不痛苦 n_ph 用于响应频带。

2)

您不需要容器是inline-block。我发现无论有没有它都可以工作。

Answer 3

您可以在行内块的末尾添加不可见的占位符。这将使最后一行左对齐。

http://jsfiddle.net/aakt65x4/

但是，如果第一行没有填满，整个东西就会显示为左对齐。

HTML：

<!--
  Centers a group of boxes that wrap to the width of its container.
  Also left-aligns them inside the container.
  Issue: Does not center group if there aren't enough boxes to fill
  the first row.
  -->
<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>

    <!--
      How many placeholders do you need?
      At least the number of blocks minus two.
      -->
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
</div>

CSS：

body {
    text-align: center;     /* center a max-width container */
    font-size: 0;           /* remove spaces between blocks */
}
.container {                /* you don't need this */
    background-color: #eee; /* so you can see what's happening */
    max-width: 960px;       /* to demonstrate the centering of a max-width container */
    display: inline-block;  /* center the max-width container */
    text-align: center;     /* center the group of blocks */
}
.block {
    display: inline-block;  /* left-align within the group */
    background-color: red;  /* so you can see what's happening */
    height: 100px;
    width: 100px;
    margin: 10px;
}
.placeholder {
    display: inline-block;  /* add to the line of blocks */
    width: 120px;           /* width + margin of a block */
}