如何在背景中居中和元素内容100％

Question

我正在尝试设置一个布局，其中内容（可以是文本或任何内容）位于中间，而背景颜色或图像位于整个宽度中。我的解决方案是创建一个带背景的元素容器和一个宽度较小的子元素margin: 0 auto;

（http://jsfiddle.net/kp4D8/1/）。

有没有其他人为这样的情况提出另一种解决方法？

谢谢， 卡西姆

Answer 1

你的方法就是如何做到这一点，这可能是最好的方法。

如果您想使用最小标记，可以使用的一种替代方法是删除<section>元素并将margin应用于.element-container下的元素，如下所示：

jsFiddle

.element-container * {
    padding: 5px;
    width: 50%;
    text-align: justify;
    margin: 0 auto;
}

.element-container h2 {
    text-align: right;
}

我更喜欢使用原始方法的原因是，我可以更轻松地设置内部元素的背景，并在不使用*选择器的情况下将所有内容组合在一起。