javascript - さまざまな画面サイズでナビゲーション バーを中央に配置するにはどうすればよいですか

Question

ページを作っています。このページにはカスタム ナビゲーション バーがあります。

ナビゲーション バーの寸法 - 幅:800px 高さ:100px。
本体の背景色: グレー; ナビゲーション バーの背景色: 青。

ナビゲーション バーは幅 800 ピクセルで青色になるため、ナビゲーション バーをページの中央に配置したままで、大きな画面の左端と右端まで青色を引き延ばしたいと考えています。

これを達成する方法はありますか？

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>