0

画面のほぼ中央に配置された 2 つの「フローティング」テキスト ボックスを含む、フルスクリーンの Web レイアウトがあります。ボックスの css は次のとおりです (ページの垂直方向を除いて同じです)。

#home-box-1
{
background-image:url('../images/px_trans_brown.png');
margin-top:16%;
margin-left:25%;
width:850px;
height:176px;
}

1920 x 1080 のフルスクリーンでは、まったく問題なく表示されます。ボックスは最小サイズ (1024 x 768) に収まるようにサイズ設定されており、両側に余裕があります。ただし、画面のサイズを変更すると、左側に大量のデッド スペースがあり、右側のボックスは画面からはみ出します。

私は CSS の専門家ではありませんが、「margin-left:25%」は、ブラウザー ウィンドウのサイズに関係なく、画面の端から 25% のマージンを維持するという印象を受けました。

どうすればこれを修正できるか、誰にも手がかりがありますか?

4

1 に答える 1

2

これにより、ボックスが中央に配置され、周囲に小さな余白が保持されます。

body {
  margin-left: 75px;
  margin-right: 75px;
}
#home-box-1 {
  background: #aaa;
  margin-top:16%;
  margin-left:auto;
  margin-right: auto;
  max-width:850px;
  height:176px;
}
于 2012-06-14T14:34:10.643 に答える