如何保持固定位置的 div 与居中的 div 对齐？

Question

不确定如何为问题命名。我有一个这样的html结构：

<div id="nav"></div>
<div id="wrapper">
   <div id="content">
   </div>
</div>​

像这样的一些 css：

#nav {
    width: 200px;
    height: 50px;
    margin: 0 0 0 -100px;
    position: fixed;     
    left: 50%;
    background: red;
}

#wrapper {
    width: 250px;
    height: 1000px;
    margin: 0 auto;
    background: blue;
}

#content {
    width: 200px;
    height: 1000px;
    margin: 0 auto;
    background: green;
}

包装器比内容宽，并且内容在包装器中居中。我的问题是当窗口小于包装器 div 时，将固定在页面顶部的导航 div 与内容 div 居中/对齐。当您左右滚动时会出现问题，固定 div 在窗口中保持居中并且内容 div 左右滚动。我正在尝试在没有 javascript 的情况下完成此操作。

这是我遇到的一个 jsfiddle，调整结果窗口的大小以查看当窗口小于包装 div 时导航 div 不会保持居中/与内容 div 对齐。

http://jsfiddle.net/p2Mzx/1/

提前致谢！

Answer 1

最简单的解决方案是将#nav 放在你的#wrapper 中并给它25px 的水平边距：

html:

<div id="wrapper">
   <div id="nav"></div>
   <div id="content">
   </div>
</div>

css:

#nav {
    width: 200px;
    height: 50px;
    margin: 0 25px;
    position: fixed;  
    top: 0;   
    background: red;
}

#wrapper {
    width: 250px;
    height: 1000px;
    margin: 0 auto;
    background: blue;
}
#content {
    width: 200px;
    height: 1000px;
    margin: 0 auto;
    background: green;
}

另见fiddle。

Answer 2

我想你也可以为导航添加margin: 0 auto。

然后 nav 将像 wrapper 一样定位到父元素，居中。 但删除了固定形式的导航。 position:fixed 使其定位到浏览器窗口并脱离正常流程。这是你想要的吗？

Answer 3

将导航放在包装器内，就在内容上方会更合适。

<div id="wrapper">
   <div id="nav"></div>
   <div id="content"></div>
</div>​

导航的 CSS 可以有 25px 的左右边距。也不需要绝对定位和宽度。

#nav {  
    height: 50px;
    margin: 0px 25px 0px 25px;
    background: red;
}

#wrapper {
    width: 250px;
    height: 1000px;
    margin: 0 auto;
    background: blue;
}

#content {
    width: 200px;
    height: 1000px;
    margin: 0 auto;
    background: green;
}​

请看这个小提琴：http://jsfiddle.net/p2Mzx/20/

Answer 4

您可以将导航和内容固定为padding-top。

考虑这个链接jsfiddle