html - ページの問題をセンタリングする

Question

わかりました、これを説明できるかどうか見てみましょう。マイページのコンテンツの幅は 960px です。幅が 1426px (#siteWrap) の別の div の中央にあります。

#siteWrap{
margin:0px auto;
width:1426px;
background: url(../images/bg.jpg) no-repeat ;
}

私が知る必要があるのは、画面の解像度に関係なく、#siteWrap をページの中央に配置する方法です。私の訪問者のほとんどは、1024x768 の画面解像度を使用しています。その解像度でこのページをテストすると、サイトのコンテンツに到達するために左から右にスクロールする必要があります。

どんな助けでも大歓迎です。

score 2 · Accepted Answer

設定するだけ

幅: 100%;

マージン: 0 auto; これではなく、コンテンツ div に設定する必要があります。

score 0 · Accepted Answer

次のことを試してください。

#sitewrap {
   position:absolute;
   top:0px;
   left:50%;
   width:1426px;
   margin-left:-713px;
   background: url(../images/bg.jpg) no-repeat ;
}

これは中央に配置されますが、ブラウザウィンドウからはみ出します。

score 0 · Accepted Answer

コンテナーが水平方向にはみ出すと、ブラウザーは自然にコンテナーを画面の左側にドッキングします。これをやるべきだと思います。これを回避するには、 Javascript を使用して、画面/ビューポートの解像度に基づいて必要なオフセットを計算することにより、コンテナー要素を中央に配置できます。

3 に答える 3