2

我想要一个使用自动左/右边距的居中块，但我也希望它具有背景颜色。由于背景颜色不应用于块的边距区域，因此我使用设置了背景颜色的块，然后使用具有自动边距的内部块。

我不喜欢这个，因为它需要额外的标记。是否有一种技术可以在仅使用单个块的同时实现这一目标？

更新：澄清一下，我想用一个块而不是两个块来实现同样的事情；在下面的示例中，我想删除内部 div。

我目前正在使用的基本代码：

<section id="example">
    <div id="inner">
        <h1>Example</h1>
        <p>Example content.</p>
    </div>
</section>

<style>
    #example {
        background-color:#ccc;
    }
    #inner {
        margin:0 auto;
        padding:10px 0;
        width:500px;
        background:white;
    }
</style>

在网站或 Google 中找不到任何内容。

在此先感谢，奈杰尔

4

2 回答 2

1

因为您希望 div#inner 居中，所以它将始终位于父级中。在这种情况下，另一个元素#portfolio，但它也可以是主体。这种解决方案是完全可以接受的。

您可以尝试添加负边距和一些填充，但您会使分配的事情复杂化。你现在拥有的东西对我来说很有意义，一个元素填充宽度并提供完整的背景颜色，一个元素定位在中心

于 2013-07-27T14:09:12.320 回答
1

如果你有一组固定的块元素，你可以在#example. 这是一个jsFiddle。

问题是您保存在 HTML 标记中，浪费在 CSS 中，并且假设您只有块子级。例如，添加一个<span>标签会破坏这个流程，它们本身需要被包装在一个块容器中。

HTML

<section id="example">
        <h1>Example</h1>
        <p>Example content.</p>
</section>

CSS

#example {
        background-color:#ccc;
}
#example > * {
    width: 200px;
    margin: 0 auto;
}
于 2013-07-27T14:13:09.447 回答