固定位置divを中心divに揃えるにはどうすればいいですか？

Question

質問にタイトルを付ける方法がわかりません。このようないくつかのCSSで

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

：

#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; 
} 

ラッパーは内容よりも幅が広い、そしてコンテンツはラッパーの中央に私はこのようなHTMLの構造を有しています。私の問題は、ページの上部に固定されているnav divを、ウィンドウがラッパーdivよりも小さいときにcontent divに中心合わせ/整列させたままにしておくことです。左右にスクロールすると問題が発生し、固定divはウィンドウの中央に残り、コンテンツdivは左右にスクロールします。私はjavascriptなしでこれを達成しようとしています。

ここには、私が実行していることのjsfiddleがあります。結果ウィンドウのサイズを変更して、ウィンドウdivがラッパーdivより小さい場合にnav divがどのように中央に収まるか/ content divに揃えないかを確認します。事前に

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

ありがとう！

Answer 1

最も簡単な解決策は、あなたの#wrapperで#navを入れて、それを25ピクセルの水平方向のマージンを与えることになります：

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

navの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