多行中心内嵌块

时间:2014-10-22 18:58:38

标签: html css

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

这里的代码包含好的和坏的示例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;”。

1 个答案:

答案 0 :(得分:0)

这是working fiddle

如果它有类宽

,只需在最后一个元素上设置一个右边距
.container>div.wide:last-child:nth-child(odd){
    margin-right: 160px; 
}

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

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