1

jqueryを使用して、DIVをページの正確な中央に配置する必要があります。DIVのCSSスタイルは次のとおりです。

#page-content #center-box{
 position:absolute;
 width:400px;
 height:500px;
 background:#C0C0C0;
 border:1px solid #000;
 }

センタリング用のjQueryは次のとおりです。

windowheight = $(window).height();
windowwidth = $(window).width();
pagecenterW = windowwidth/2;
pagecenterH = windowheight/2;
$("div#page-content div#center-box")
    .css({top: pagecenterH-250 + 'px', left: pagecenterW-200 + 'px'});

このコードは、更新されたときにページに対してアクションを呼び出しません。私は何が間違っているのですか？

4

3 に答える 3

4

これを試してください：実例

センターボックスを制約するスタイルが＃page-contentにないことを確認し、jqueryコードをdocumentreadyイベントに入れてみてください。

/*CSS*/
#center-box{
 position:absolute;
 width:400px;
 height:500px;
 background:#C0C0C0;
 border:1px solid #000;
 }

/*js*/
$(document).ready(function(){
  var windowheight = $(window).height();
  var windowwidth = $(window).width();
  var pagecenterW = windowwidth/2;
  var pagecenterH = windowheight/2;
  $("div#center-box")
      .css({top: pagecenterH-250 + 'px', left: pagecenterW-200 + 'px'});
});

/*html*/
<body>
  <div id="center-box">

  </div>
</body>
于 2010-04-11T21:35:49.267 に答える
1

Idは、との周りに丸括弧を削除 または+ 'px'追加することから始めます。pagecenterH-250pagecenterW-200

あなたがそこでしていることはint + int - stringです。

于 2010-04-08T13:14:43.680 に答える
0

絶対値を使用すると、ウィンドウのサイズ変更時にボックスの位置が変わりません（たとえば、横向きから縦向き）。代わりにfixedを使用してください。基本的な例については、 centerプラグインを使用してビューポートするjQuerycenter要素を参照してください。

于 2012-05-06T09:16:49.953 に答える