Question

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

我已经删除了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项数组的长度”，对于大量的项目，这可能会计算成本很高。相反，作为近似规则，您需要足够的占位符“块”来在容器中创建新行。事实上，占位符的数量是（伪代码）：

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＆lt; 时，我省略了这种情况。 N_MAX 。这很困难，当 n＆lt; n＆lt;时，您将不得不使用 n_ph 值。 N_MAX 。如果你需要 n_ph 来处理不同的窗口大小，我会考虑添加一个窗口宽度观察器，并为你的“响应”宽度带增加或取走占位符。这是一种痛苦，但你可能不会 n＆lt; n_max 或者，你的 n_max 很小，对于响应乐队“手动taylor” 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 */
}

收缩包装并将容器对中以用于内嵌块元件

3 个答案: