javascript - 如何在不同的屏幕尺寸上居中导航栏

Question

我正在建立一个页面。此页面将有一个自定义导航栏。

导航栏尺寸 - 宽度：800 像素高度：100 像素。
机身bgcolor：灰色；导航栏 bgcolor：蓝色。

由于导航栏将是 800px 宽并且是蓝色的，我希望导航栏保持在页面的中心，但在大屏幕的左右边缘继续拉伸蓝色。

有什么想法可以做到这一点吗？

Answer 1

这样就可以了，诀窍是margin-auto left and right

.outer
    {
      background-color:Gray;
    }

    .inner
    {
     width:800px;
     height:100px;
    background-color:blue; 
    margin:0 auto 0 auto;
    }

      <div id="outer">
        <div id="inner">blah</div>
      </div>

Answer 2

不确定您是否得到了您正在寻找的答案，但为了清楚起见，您可以将导航元素嵌套并居中在一个具有 100% 宽度和类似样式的包装元素中，如下所示。

<div id="navWrap">
    <ul id="nav">
        <li>...</li>
    </ul>
</div>

<style type="text/css">
#navWrap {
    width:100%;
    background:blue;
}
#nav {
    width:800px;
    height:100px;
    margin:0 auto;
    background:blue;
}
body {
    background:grey;
}
</style>