0

私はこの質問について長い間研究してきましたが、幸運ではありませんでした。これが状況です。ページの中央に青い長方形があると仮定します。全画面表示の場合、長方形の比率を維持するために、高さと幅のパーセンテージを使用できます。ただし、長方形の位置が変わり、上に移動して、ページの下部に余分なスペースができてしまいます。

では、フルスクリーンモードが有効になっているときに、長方形をページの中央（垂直方向と水平方向の距離が等しい）に保つにはどうすればよいですか？つまり、画面が1280x800の場合、長方形の中心は（640,400）になります。

Chromeブラウザのホームページを確認すると、全画面表示でもアプリの位置は変わらず、下部に余計なスペースができなくなります。あなたの助けに感謝

4

3 に答える 3

4

width長方形を定義し、margin: 0 auto;それをページの水平方向の中央に配置するために使用します。

div水平方向と垂直方向の中央に配置する場合は、次のようなものを使用します

HTML

<div id="rectangle"></div>

CSS

#rectangle {
   width: 30%; //can set any value here
   height: 20%; //can set any value here
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -15%; //negative half of width
   margin-top: -10%; //negative half of height
   background-color: red;
}​

ここでフィドルを参照してください。

また

HTML

<div id="wrapper">
  <div id="container">
    <div id="rectangle"></div>
  </div>
</div>​

CSS

body, html {
    height: 100%;
    overflow:hidden;
}
#wrapper {
    width: 100%; 
    height: 100%; 
    overflow: visible; 
    position: relative;
}
#wrapper[id] {
    display: table; 
    position: static;
}
#container[id] {
    display: table-cell; 
    vertical-align: middle; 
    width: 100%;
}
#rectangle {
    width: 200px; 
    height: 100px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: blue;
}

ここでフィドルを参照してください。

于 2012-07-13T17:09:41.573 に答える
1

マージンにもパーセンテージを使用してみましたか。たとえば、中央の正方形の高さと幅が60％の場合、マージンとして20％を追加すると、スケールアップも可能になります。試さずに、それがあなたに望ましい効果を与えるかどうかはわかりませんが、それは正方形が上に移動する問題を修正するはずです。

于 2012-07-13T17:08:06.247 に答える
1

おっと、

iMacで作業していることを忘れています。スクリプトにifを追加すると、問題が解決しました。

function vertical_center()
{
    var ww = $(window).width();
    if (ww < 1600)
    {
    $("#character").css({'width': ww + 'px','height': (ww/4) + 'px', 'margin-top': -(ww/8) + 'px'});
    }
    else
    $("#character").css({'width': ww + 'px'})
}

それでも、誰かが私のコードを見て、愚かなことが残っている場所を教えてくれたら嬉しいです。この投稿がそれでも何かを追加したことを願っています、みんなありがとう

于 2012-09-12T05:33:50.163 に答える