3

これがフィドルです。

HTML:

<div id="greeter" class="welcomer">
    <h1>This should be centered</h1>
</div>

jquery:

$(document).ready(function(){

$(window).resize(function(){

    $('.welcomer').css({
        position:'absolute',
        left: ($(window).width() - $('.welcomer').outerWidth())/2,
        top: ($(window).height() - $('.welcomer').outerHeight())/2
    });

});

// To initially run the function:
$(window).resize();

});​

</p>

これがどのように機能するかにはバグがあるようです。中央に配置される場合もあれば、垂直方向または水平方向にのみ中央配置される場合もあります。私はjavascriptとjqueryを初めて使用しますが、間違っていることはありますか?

4

3 に答える 3

1

わかりました、ここを見てください：http://jsfiddle.net/zQ97A/13/

基本的に、コンテナに幅が必要であり、次のコードも必要です。

"top": ((($(window).height() - $('.welcomer').outerHeight()) / 2) + $(window).scrollTop() + "px"),
"left": ((($(window).width() - $('.welcomer').outerWidth()) / 2) + $(window).scrollLeft() + "px")
于 2012-12-11T14:02:11.017 に答える
0

.welcomer DIVの幅を定義すると、コードは完全に機能します。

于 2012-12-11T14:38:29.967 に答える
0

私の好みでは、クラスをcssで定義してから、そのクラスをjqueryを使用してdomのdivに設定することをお勧めします。

#custom.css
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -(your_div_height/2)px;
  margin-left: -(your_div_weight/2)px;
}

#custom.js
$(#greeter).addClass("center")

jsファイルの前にcssファイルが読み込まれるため、これはより高速です。

于 2012-12-11T14:28:36.747 に答える