如何保持固定位置的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时，使固定在页面顶部的nav div与内容div居中/对齐。当你向左和向右滚动时，问题出现了，固定的div在窗口中居中，内容div左右滚动。我试图在没有javascript的情况下完成这个任务。

这是我遇到的一个jsfiddle，调整结果窗口的大小，看看当窗口比包装器div小时，nav 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

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

然后，导航将定位到父元素，就像包装器一样，居中。但删除了固定形式的导航。position:fixed使其定位在浏览器窗口和正常流之外。这是你想要的吗？

Answer 3

更合适的做法是将nav放在包装器中，恰好在内容的上方。

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