Question

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

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

更新：澄清一下，我想只用一个块而不是两个块来实现同样的目的;在下面的例子中，我想删除内部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的任何内容。

提前致谢，佰

Answer 1

因为你希望div＃inner居中，所以它总是在父级中。在这种情况下，另一个元素#portfolio，但它也可能是正文。这个解决方案是完全可以接受的。

您可以尝试添加负边距和一些填充，但是你会分享一些事情。你现在拥有的东西，一个填充宽度并提供完整背景颜色的元素，以及一个位于中心的元素

Answer 2

如果您有一组固定的块元素，则可以为#example的所有子元素设置边距。 Here是一个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;
}

使用“margin：0 auto;”和没有内部div的背景颜色

2 个答案: