0

div を画面の中央に配置するスクリプトを作成しました。サファリでは問題なく動作しますが、何らかの理由でウィンドウのサイズ変更でジャンプします。負の「マージントップ」を2倍にしていると思います。誰でもこれについて経験があります。私はクロムまたはすなわちで試したことはありません。

// PART B
function cent() {
var $block = $("#block"),
    margintop = parseInt($block.height() / -2);
console.log('called');
$('#block').css("margin-top", margintop);
};

$(document).ready(function(){
cent();
});
$(window).resize(function(){
cent();
});

サイトの URL: www.thebackroads.com.au

4

2 に答える 2

1

ログに記録$block.height()すると、コンテナーの実際の高さが異なるように見えるため、読み込み時に生成された javascript の margin-top がサイズ変更時のものと異なることがわかります。

これはおそらくcent()、DOM が完全にロードされていないときに最初の呼び出しが行われたためです。または、画像の読み込み中にプリローダーを表示するため、少なくともテキスト コンテナーは最終的な高さに達していません。この理由は、おそらく外部ライブラリです。DOM が完全にロードされていません。

これは、高さを計算するときにコンテンツが非表示になっていることを firebug で明確に確認できます。

ここに画像の説明を入力

ここでいくつかの解決策を読んでください：

jQuery: jQuery で隠し要素の高さを取得する

于 2013-06-13T07:36:59.333 に答える
0

または、このスクリプトを試してください。ウィンドウの高さで計算します。

function cent() {
    var margintop = ($(window).height() - $('#block').height()) / 2;
    $('#block').css("margin-top", margintop);
};
于 2013-06-13T07:32:30.223 に答える