我想重新创建以下 header :
问题是内容在白色部分居中。灰色是主体的背景，标题是屏幕的 100%。
我现在拥有的是:
CSS
.top_left {
background:#3c4d74;
}
.top_right {
background:#2f3a5a;
}
.top_center {
background:#3c4d74 url(http://img85.imageshack.us/img85/2816/headerbgo.jpg) no-repeat right top;
height:140px;
}
#page,
.top_center {
max-width:1000px;
margin:0 auto;
}
#page {
background:#FFF;
}
body {
background:#DEDEDE;
}
HTML
<body>
<div id="top-header">
<div class="top_left"></div>
<div class="top_center">
<a href="#">LOGO</a>
</div>
<div class="top_right"></div>
</div>
<div id="page" class="hfeed">
MY content bla bla bla
</div>
</body>
您可以看到正在处理 http://jsfiddle.net/gTnxX/ (我将最大宽度设置为 600 像素而不是 1000 像素，因此您可以在 fiddle 上看到它)。
如何在任何分辨率下将左侧设为柔和蓝色，将右侧设为硬蓝色？
最佳答案
为此，您需要非常了解定位的工作原理。
#header-bg 位于 #wrapper 下方。它的宽度为 100%，高度为 140 像素，带有 2 个 div，它们都占据了该空间的 50%，并且它们的左/右颜色都不同。
#wrapper 相对定位于使 z-index 起作用，将其置于 #header-bg 之上。宽度设置为 600 像素，margin: 0 auto; 将其居中。
#header 是一个简单的 div，它设置了高度和所需的背景。
内容在正常流程中遵循 #header。
这是一个包含所请求行为的 jsfiddle。
http://jsfiddle.net/sg3s/cRZxN/
这甚至可以很好地降级，如果内容大于屏幕(我从原始 jsfiddle 中注意到这一点)，您可以水平滚动。
编辑:
为了使其与 IE7 兼容，我做了一些更改以修复 2 个错误。我必须将 left: 0; 和 top: 0; 显式添加到 #header-bg 以修复定位错误。将 #header-bg 中的 div 设置为 49% 而不是 50% 否则 IE7 将无法正确调整它们的大小并使正确的 div 向下移动。为了弥补造成的小差距，我制作了正确的 div float: right;。
关于html - 如何创建具有多种颜色的居中标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11065882/