css - 低解像度でウェブサイトを中央に表示

Question

次の問題があります。すべての要素が中央に配置された Web サイトがあります。コンテンツパーツは、幅 1060px、マージン 0 auto の div です。これまでのところ正常に動作します。

問題は、ブラウザのサイズを 1024 に設定すると、この div が中央に表示されず、左側から始まることです。この div には、40px の内部パディングもあります。解像度が小さい場合、左側にパディングが表示されますが、右側にはパディングが表示されません..

長い質問短い...ブラウザウィンドウのサイズに関係なく、ウェブサイトを常に中央に配置するにはどうすればよいですか..

Edit1: 論理的な問題は、ブラウザーウィンドウの幅を縮小すると、すべてのブラウザーが Web サイトをウィンドウの左側の「境界線」に配置することです。これを防ぐための回避策はありますか? ブラウザがブラウザの左側を超えてページを「ネガティブ」に「移動」するように？

前もって感謝します

score 1 · Accepted Answer

CSS:

body {
width: 99%;
max-width: 1060px;
min-width: 800px;
margin: auto 0;
}

パーセンテージを使用する方が安全ですが、配置などで問題が発生する可能性があります。最小/最大を使用してリスクを最小限に抑えます。

score 1 · Accepted Answer

画面よりも大きい固定幅を使用している場合、小さいブラウザを取得すると、これが発生します。

レスポンシブにすることを検討しましたか、おそらく次のようなものを持っていますか

.container{
  width:100%;
  max-width:1060px

/* then any other styles, margin etc */
}

そうすれば、ブラウザでメインコンテナのサイズが変更されますか?

Ethan Marcotte によるレスポンシブデザインは、レスポンシブ Web サイトについて詳しく学ぶのに最適な本です。

3 に答える 3