非图像背景标题的居中文本？答案

【问题标题】：Centering text for non-image background header?非图像背景标题的居中文本？
【发布时间】：2026-02-17 21:55:03
【问题描述】：

继续这个问题：Stretchable header like StackExchange。我无法将我的网站的文本居中，因此它保留在 960 网格容器内（我使用的是960 grid system）。我尝试过他们的 2 种不同方式：

将我的徽标和菜单放在背景 div 中，但这会使所有文本在 960px 容器之外的屏幕上显示在左侧。

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

我将它放在徽标和菜单之外，但这涵盖了我的标题中包含的所有内容（徽标、标题顶部边框和菜单）。

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

我在这里错过了什么？

【问题讨论】：

当您绝对定位一个元素时，该元素将从文档流中移除并相对于应用了定位的最近的父元素进行定位。如果没有父应用定位，它将相对于文档进行定位。

标签： html css

【解决方案1】：

关于您的代码，您不能将position: absolute; 与margin: 0 auto; 技巧一起使用，因为“斯科特·辛普森”在他的评论中所说的，但是如果您需要对#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，我希望这会让一切变得更好。

【讨论】：