html - 将文本定位在宽度为 :100% (liquid? ) 页眉和页脚元素内

Question

一些背景:我构建的几乎每个站点都基于使用中心容器 div，其中您在屏幕上看到的所有内容都包含在一个 1000 像素宽的容器中。左侧或右侧没有任何东西，也没有延伸到屏幕左侧或右侧的顶部或底部栏。现在是时候构建一个顶部和底部栏扩展到超过 1000 像素容器 div 的站点了。明白了那部分，一直到酒吧本身。

问题:我想在顶部和底部栏中放置文本(准确地说是链接)，与此处的 SO 外观没有什么不同。这就是我搞砸的地方，因为我想在没有绝对定位、JS 或 jQ 或通过插件的情况下做到这一点。当我添加一个 div 以包含顶部栏中的文本时，它很高兴地位于顶部栏的左侧，而不是我想要的位置。我已经搜索、研究并做了一些小尝试来解决这个问题，但都无济于事。

因此:我建立了一个示例站点，其中包含一张图片，如果我希望它看起来如何的话。该站点在 HTML 和 CSS 上的最低限度(希望)使事情变得清晰，并且可以找到 HERE .

Answer 1

将此添加到您的 CSS:

#top_content {
  margin: 0 auto;
  width: 1000px;
}

这将使 <div id="top_content">here</div> 内的任何文本与您的主要 1000 像素容器对齐，同时 <div id="topbar">仍然扩展到浏览器宽度的 100%。

对你的页脚做同样的事情，给它一个内部 div 并用 CSS 定位它，给它自动左/右边距和 1000 像素宽度，所以它在主 #content 容器下居中。