1

このメソッドを使用して、div をページの垂直方向の中央に配置しています。

$(window).resize(function() {
    $('.container').css({
        top : ($(window).height() - $('.container').outerHeight()) / 2
    });
});
$(window).resize();

しかし、コードは最初は機能しません。ページの読み込み中にウィンドウのサイズを物理的に変更しようとするまで、何が起こっているのかわかりませんでした。ブラウザー ウィンドウのサイズを物理的に変更するとすぐに、div がすぐに中央に配置されます。これを回避する方法はありますか？そもそもなぜそうなってしまうのでしょうか？

ありがとう！

4

3 に答える 3

3

このコードは、ロード時とサイズ変更時に実行する必要があります

$(document).ready(function(){
    $('.container').css({
        top : ($(window).height() - $('.container').outerHeight()) / 2
    });


    $(window).resize(function() {
        $('.container').css({
            top : ($(window).height() - $('.container').outerHeight()) / 2
        });
    });
});
于 2013-05-06T19:57:07.437 に答える
1

同様のコードを作成する方法は、div を中央に配置するヘルパー関数を定義することです (jquery onDocumentReady 内)。

$(function () {

    function _centerDiv() {
        $('.container').css({
            top : ($(window).height() - $('.container').outerHeight()) / 2
        });
    }

    _centerDiv();
}

次に、ウィンドウのサイズ変更イベントにフックしました。

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

プログラムでトリガーする場合 (上記のように、ドキュメントの読み込み時に準備ができている場合、またはその他のイベントに対して、ヘルパー関数を呼び出すだけです。

ジョン

于 2013-05-06T19:58:08.757 に答える
1

このJSBinを確認してください

ポジショニングを追加しました：

 position: 'absolute'
于 2013-05-06T19:59:56.480 に答える