1

かなり一般的なこの垂直センタリング方法を見つけました..

 #container {
 width: 960px;
 height: 740px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -480px;
 margin-top: -370px;
 }

ここで中心にしようとしているのはサイト全体です。このコードは、画面プレビューが div の高さ (740px より大きい) よりも大きい場合、期待どおりに完全に機能します。ただし、ブラウザー ウィンドウが最小化されると、div の垂直サイズ (740px) 未満になると、ヘッダーの一部がページの上部に表示されなくなります。

50% が div のサイズの半分未満になり、margin-top で均等化されることを見て、なぜこれが起こっているのか理解できます。私が探しているのは、この問題の修正ですか? または、まったく別の方法で、サイトを垂直方向と水平方向の両方で中央に配置するだけです。

4

4 に答える 4

1

メディア クエリを追加する必要があります。

@media screen and (min-height:740px) {
    #container {
        top:0;
        margin-top:0;
    }
}

これは、画面の高さが 740px 以上のフォーマットのみを適用します。メディア クエリについて詳しく知りたい場合は、http://www.w3.org/TR/css3-mediaqueries/を確認してください。

于 2013-11-08T20:04:51.343 に答える
0

Lino Rosa が言及したような Absolute Centeringは、高さの問題を修正するなど、応答性の高いタッチを追加しながら、水平方向と垂直方向のセンタリングを簡単に行うための最良のアプローチです。

理想的には、コンテンツがビューポートによって変化するように、幅と高さの宣言にパーセンテージを使用する必要があります。もちろん、ピクセルだけが必要な場合もあります:-)

これが私がやったことです：

.Absolute-Center {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
}

#container {
  width: 960px;
  max-width: 90%;
  height: 740px;
  max-height: 90%;
  overflow: auto;
}

a と を設定するmax-heightとmax-width、幅が 960 ピクセル未満、高さが 740 ピクセル未満であっても、ボックスがコンテナー (この場合はブラウザー ビューポート) の 90% を超えることはありません。そのため、小さな画面でも中央のボックスが適切に表示されます。overflow: autoコンテンツがボックスよりも長い場合、ユーザーがボックス内をスクロールして残りを表示できるようにします。

デモを見る

画面サイズに関係なく、正確に 960px x 740px のボックスが必要な場合 (小さなウィンドウですべてのコンテンツを表示するには、ユーザーがスクロールしなければならない場合)、次の#containerようにメディア クエリを使用して絶対センタリング スタイルのみを適用します。

#container { 
  width: 960px;
  height: 740px;
  overflow: auto;
  margin: auto; 
}

@media screen and (min-height:740px) and (min-width: 960px) {
  #container {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
  }
}

デモを見る

于 2013-11-13T17:28:40.960 に答える