0

#boxウィンドウのサイズを変更した後でも、すべての主要なデバイス (レスポンシブ デザイン) に対しても、画面の中央に絶対位置の DIV を保持したいと考えています。レスポンシブ #box は css3 メディア クエリを使用して実行されleftますが、jquery を使用して計算されます。しかし、ボックスを正確に中央に配置できます。小さな画面のウィンドウのサイズ変更では、左右の余白が等しくありません。

<HTML>

<body>
    <div id ="box">
      <a> is am athe centre?'</a>
    </div>
</body>



</HTML>

css:

 #box {
      position:absolute;
      background:red; 
      width:900px; 
      height:400px;
      }

@media only screen and (min-width: 979px)


{
 #box{width:760px;background:yellow;}
}


@media only screen and (min-width: 768px) and (max-width: 979px)

{
#box{width:760px;background:pink;}
}



@media only screen and (min-width: 480px) and (max-width: 767px) 

{
#box{width:460px;background:black;}
}


@media only screen and (min-width: 321px) and (max-width: 479px) 

{
#box{width:300px;background:blue;}
}


@media only screen and (max-width: 320px) 

{
#box{width:300px;background:grey;}
}

jQuery :

function leftmargin(){
 var w_box    =  ($('#box').width());
 var w_window = $(window).width();
 var w_left = (w_window - w_box)/2 ;
 $("#box").css("left", w_left + "px");
}

$(window).resize(function() {
   leftmargin();
});

$(document).ready(function() {
   leftmargin();
});
4

4 に答える 4

3

これを追加するだけで、メディア クエリや JavaScript も必要ありません (ボックスのサイズがわかっているため)。

#box {
  position:absolute;
  background:red; 
  width:900px; 
  height:400px;
  top: 50%;
  left: 50%;
  margin-top: -200px; // half total width (border, padding, and width)
  margin-left: -450px; // half total height (border, padding, and width)
}

幅がわからないが、変換をサポートする最新のブラウザーをターゲットにするだけで問題ない場合は、次のように置き換えますmargins。

transform: translate(-50%, -50%);
于 2013-07-29T14:47:48.377 に答える
1

とwidthを入れheightます%。

このフィドルを参照してください:フィドル

私が追加しました：

body{
    width: 100%;
    margin: 0 auto;
}
#box {
      position:absolute;
      background:red; 
      width:80%; 
      height:40%;
      margin-left: 10%;
      margin-top: 20%;
}
于 2013-07-29T14:52:17.433 に答える
1

CSS ( source )を使用してボックスを中央に配置し、メディア クエリでwidthとを調整margin-leftします。

#box {
    position:absolute;
    border:1px solid red;
    width:760px;
    height:30px;
    background:yellow;
    left: 50%;
    margin-left:-380px; /* half of the box */
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
    #box {
        background:pink;
    }
}
@media only screen and (min-width: 480px) and (max-width: 767px)  {
    #box {
        width:460px;
        background:black;
        margin-left:-230px;
    }
}
@media only screen and (min-width: 321px) and (max-width: 479px)  {
    #box {
        width:300px;
        background:blue;
        margin-left:-150px;
    }
}
@media only screen and (max-width: 320px) {
    #box {
        background:grey;
    }
}

ここでデモ、内側のフレーム境界をドラッグして「デバイス サイズをシミュレート」: http://jsfiddle.net/hD657/3/

JavaScript に基づくソリューション: http://jsfiddle.net/NnDvs/

コメントへの回答:

margin-leftボックスの幅に基づいて計算されるため、ビューポートやウィンドウの幅には依存しません。あなたのコメントから、あなたのボックスは数ピクセルずれていると思います（より明確に説明して、より良い支援ができるようにする必要があります）。jQuerywidthはスクロールバーを「含まない」幅を返すため、コンテンツの高さに基づいて変化します（つまり、スクロールバーがあるかどうか）。width: を取得する前に、スクロールバーを一時的に「非表示」にすることができますdocument.body.style.overflow = "hidden";。しかし、一般的に、の戻り値は.width()あなたが探しているものであるべきだと思います。これはあなたが探しているものですか？

于 2013-07-29T15:09:01.567 に答える
0

絶対配置の div を中央に配置するのは簡単ですが、レスポンシブ デザインと可変幅/高さについてはどうですか?

私が思い付くことができる最善の方法は、表示テーブルセルを使用することです:

html {
    display: table;
    width: 100%;
    height: 100%;
}
body {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

#box {
    display: inline-block;
    background: #c00;
}

http://jsfiddle.net/f00dmonsta/cZC3g/

于 2013-07-29T15:00:59.313 に答える