继续这个问题:Stretchable header like StackExchange .我无法将我的网站文本居中，因此它位于 960 网格容器内(我使用的是 960 grid system )。我尝试过他们的 2 种不同方式:
.
将我的 Logo 和菜单放在背景 div 中，但这会使所有文本在 960 像素容器之外的屏幕上向左移动。
<div class="container_24"> <div id="header-top-border" class="grid_24"></div> <div id="header-background" class="grid_24"> <div class="grid_5">Logo</div> <div class="grid_19">Main Menu</div> </div> </div>我将它放在 Logo 和菜单之外，但这涵盖了我的页眉中包含的所有内容( Logo 、页眉顶部边框和菜单)。
<div id="header-top-border" class="grid_24"></div> # not shown <div id="header-background" class="grid_24"></div> # covers all <div>Logo</div> # not shown <div>Main Menu</div> # not shown
这是我的CSS:
#header-background {
background: rgb(144,191,34);
position:absolute;
top: 0;
left:0;
margin: 0 auto;
width:100%;
height:50px;
}
我在这里错过了什么？
最佳答案
关于您的代码，您不能将 position: absolute; 与 margin: 0 auto; 技巧一起使用，因为那是“Scott Simpson”在他的评论中所说的，但是如果你需要为 #header-background 使用绝对位置，你可以使用下面的代码来帮助你:
首先，我建议对容器使用 clearfix 技巧:
http://css-tricks.com/snippets/css/clear-fix/
我建议为所有元素或至少为 body 重置边距和填充，因此将此代码放在必须加载的 css 文件第一行的第一行:
* {
margin: 0;
padding: 0;
}
然后将您的代码编辑为:
HTML:
<body>
<div class="container_24 clearfix">
<div id="header-top-border" class="grid_24"></div>
<div id="header-background" class="grid_24">
<div class="grid_5">Logo</div>
<div class="grid_19">Main Menu</div>
</div>
</div>
然后你的CSS:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.container_24 {
width: 960px;
margin: 0 auto;
position: relative;
}
#header-background {
background: rgb(144,191,34);
position:absolute;
top: 0;
left:0;
margin: 0 auto;
width:100%;
height:50px;
}
注意我为 .container_24 做了什么。
希望对您有所帮助。
顺便说一句:如果你不能编辑:下面一行:
<div class="container_24">
要添加 .clearfix 类，你可以只编辑 css，所以使用 .container_24:after 而不是 .clearfix:after，我希望这会让一切都变得美好。
关于html - 非图像背景标题的居中文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8561693/