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的情况下完成此任务。

这是我正在遇到的问题，调整结果窗口大小以查看当窗口小于包装器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

我认为您也可以为导航添加margin: 0 auto。

然后nav将被定位到父元素，就像包装器一样，居中。但删除固定形式导航。 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

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

4 个答案: