html - 如何在背景 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;
}

我更愿意使用您的原始方法的原因是这样我可以更轻松地设置内部元素的背景样式并将所有内容一起设置样式而无需使用 *选择器。