1

HTML

<div class="element">
    <p>I want to center this element vertically and horizontally.</p>
</div>

CSS

.element
{
    background: #eee;
    border: 1px solid #ccc;
    font-size: 24px;
    margin: 10px;
    padding: 20px;
    position: absolute;
}

jQuery

jQuery(document).ready(function($) {
    var $element = $('.element');

    center();

    $(window).on('resize', function() {
        center();
    });

    function center() {
        var width = $element.outerWidth(true);
        var height = $element.outerHeight(true);

        console.log(width);
        console.log(height);

        $element
            .stop(true)
            .animate({
                top: Math.max(0, ($(window).height() - height) / 2),
                left: Math.max(0, ($(window).width() - width) / 2)
            });
    }
});

問題

ウィンドウのサイズを変更すると、outerWidth() と outerHeight() が間違っているため、要素が中央に配置されません。

リフレッシュ後、問題は解消されます。

Firefox でのテスト結果

デフォルト: 要素サイズ - 670x134 (良い)

768x1024: 要素サイズ - 198x254 (間違った) - 670x134 (更新後は良い)

360x640: 要素サイズ - 198x254 (不適切) - 360x182 (更新後は適切)

質問

この問題が発生する理由と修正方法はありますか?

ノート

要素の幅や高さを固定したくありません。

4

4 に答える 4

3

サイズ変更はページの読み込み時にのみ呼び出されます。コードを次のようにしてみてください。

jQuery(document).ready(function() {
    center();
});

jQuery(window).resize(function(){
    center();
});

function center() {
    var $element = $('.element');
    var width = $element.outerWidth(true);
    var height = $element.outerHeight(true);

    console.log(width);
    console.log(height);

    $element
    .stop(true)
    .animate({
        top: Math.max(0, ($(window).height() - height) / 2),
        left: Math.max(0, ($(window).width() - width) / 2)
    });
}

ここでフィドル

これにより、サイズ変更があるたびに、ページの読み込み時にサイズ変更が呼び出されます。

大きなウィンドウから小さなウィンドウにサイズ変更するときに要素を水平方向に中央揃えするのに遅延があるようです。これはアニメーションに関係している可能性が最も高いです。

おそらく、Abdulla Chozhimadathil が言及したような、アニメーション化されていない方法を使用して要素を中央に配置することを検討することをお勧めします。

于 2014-09-25T13:03:36.157 に答える
0

フィドルを確認してください

<div class="container">
    <div class="content">
        content content content 
        <br/>
        moooooooooooooooore content
        <br/>
        another content
    </div>
</div>

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table;
}
.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.content {
    background-color: red;
    display: inline-block;
    text-align: left;
}

ここでフィドル

于 2014-09-25T11:03:21.713 に答える
0

これは、jQuery アニメーションを使用しているためです。したがって、ウィンドウのサイズを変更している間、各サイズ変更が毎回トリガーされます。しかし、その短い時間内にアニメーションは完了しません。箱が中心に来ないように。ただし、サイズ変更後、アニメーションを実行するのに十分な時間があります。

したがって、アニメーションをダイレクトCSSに変更すると、サイズ変更ごとに更新できます。これをチェックしてくださいFiddle

于 2014-09-25T11:38:22.493 に答える