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;
}

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