Question

我希望将多个内联块元素置于中心位置。但是在它们的中心区域内，它们必须左对齐。

这里的代码包含好的和坏的示例：http://jsfiddle.net/xojcm8bd/

HTML代码：

<div id="world">
    Centred as expected:
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
    Not centred anymore with line break:
    <div class="container">
        <div class="item wide">1</div>
        <div class="item wide">2</div>
        <div class="item wide">3</div>
        <div class="item wide">4</div>
        <div class="item wide">5</div>
    </div>
</div>

CSS代码：

#world
{
    width: 400px;
    background: #f2f2f2;
    padding: 10px 0;
}
.container
{
    display: table;
    margin: 10px auto;
    outline: dashed 1px dodgerblue;
}
.item
{
    display: inline-block;
    width: 25px;
    margin: 6px 4px;
    padding: 0px 4px;
    background: mediumseagreen;
}
.item.wide
{
    width: 140px;
    background: salmon;
}

以下是该示例应该告诉您的一些解释：

绿色框符合预期，红色框不在下面。它们也应该居中，但最后一行的剩余单项应保持在左侧，而不是移到中间。（我可以使用text-align: center，但这会将最后一项移到中间。）

红色项目的宽度是我的布局所需要的。较小的项目只是为了证明居中工作以某种方式并且并非完全无效。（我在另一个没有覆盖多行的StackOverflow答案中找到了它。）

灰色框代表世界，i。即定义的浏览器宽度。这只是为了演示，以确保你明白我的意思。在真实的网页中，浏览器的宽度将是未知的！所以我不知道有多少项适合一行而无法用这样的数字来计算。 400px值仅用于演示，140px值也是如此。在实际解决方案中，宽度取决于浏览器窗口宽度，可以是任何。还有项目＆＃39;在真实页面上宽度可能不同（但一致）。该示例连续有两个项目，但我打算将其保持在平均屏幕的3左右。在较宽的屏幕/窗口上可能是4或5，在电话屏幕上可能是1或5。此外，每个列表中还有可变数量的项目。按索引或偶数/奇数寻址项目将不起作用。（我认为所有这些事情都很自然，但大多数人似乎都没有这样做，这就是为什么我不得不解释示例的每一个细节。到目前为止，所有答案都是依赖于示例数据是不变的。）

蓝色虚线有助于识别代码中使用的块级元素的有效大小。具有多条线的块扩展到整个宽度，因此不按预期居中。相反，它应该只占用其内容所需的空间。

如何实现？

PS：@ pianoman99，不要将我的拼写更改为美国英语，并将其称为“＃34;修正语法＆＃34;”。

Answer 1

这是working fiddle

如果它有类宽

，只需在最后一个元素上设置一个右边距

.container>div.wide:last-child:nth-child(odd){
    margin-right: 160px; 
}

无论#world有多广，它都有效。

编辑：昨晚我有点想到这个问题，即使最后一个孩子是偶数，CSS也会被应用，这会对它造成不好的影响。我上面有更新的代码，显示它选择最后一个孩子，但前提是它奇怪。现在，如果你添加或删除div并最终得到一个偶数，它仍然有效。

多行中心内嵌块

1 个答案: