web-dev-qa-db-ja.com

jQueryを使用してdivを垂直および水平に中央揃えする

このスクリプトを使用して、divを水平および垂直に中央揃えしています。

ページが読み込まれると、ブラウザのサイズを変更するまで、divは水平方向ではなく垂直方向の中央に配置されます。

私は何を間違えていますか？

$(document).ready(function (){
    $(window).resize(function (){
        $('.className').css({
            position:'absolute',
            left: ($(window).width() - $('.className').outerWidth())/2,
            top: ($(window).height() - $('.className').outerHeight())/2
        });
    });
    $(window).resize();
});
jquerycentering
33
user1807777

私は通常、この「テクニック」を使用します。

_$(function() {
    $('.className').css({
        'position' : 'absolute',
        'left' : '50%',
        'top' : '50%',
        'margin-left' : -$('.className').width()/2,
        'margin-top' : -$('.className').height()/2
    });
});
_

UPDATE：

ユーザーが提案したように、ソリューションを更新していますFred K、 .outerWidth() および .outerHeight() は、より正確なセンタリングを行います。

_$(function() {
    $('.className').css({
        'position' : 'absolute',
        'left' : '50%',
        'top' : '50%',
        'margin-left' : -$('.className').outerWidth()/2,
        'margin-top' : -$('.className').outerHeight()/2
    });
});
_

JQueryのドキュメントからの追加の注記（ .outerWidth() 、 .outerHeight() ）：

  • .outerWidth（）を含む、ディメンション関連のAPIによって返される数値は、場合によっては小数になることがあります。コードは整数であると想定すべきではありません。また、ユーザーがページをズームすると、寸法が不正確になる場合があります。ブラウザは、この状態を検出するためのAPIを公開しません。

  • .outerWidth（）によって報告される値は、要素の親が非表示の場合に正確であるとは限りません。正確な値を取得するには、.outerWidth（）を使用する前に、最初に親を表示する必要があります。

更新2：

異なるサイズの同じthisタグを持つ要素がさらにある場合にcss()メソッド内でclassを使用する方法を示す簡単な更新。

_$(function() {
    $('.className').css({
        'position' : 'absolute',
        'left' : '50%',
        'top' : '50%',
        'margin-left' : function() {return -$(this).outerWidth()/2},
        'margin-top' : function() {return -$(this).outerHeight()/2}
    });
});
_
60
Dim13i

これを使用してセンタリングします：

$.fn.center = function () {
   this.css("position","absolute");
   this.css("top", ( $(window).height() - this.height() ) / 2  + "px");
   this.css("left", ( $(window).width() - this.width() ) / 2 + "px");
   return this;
}

$('yourElem').center();
20
Jai

ハンドラーコードを関数でラップして、ページの読み込み時と$(window).resize()のハンドラーの両方でその関数を呼び出せるようにします

/* use as handler for resize*/
$(window).resize(adjustLayout);
/* call function in ready handler*/
$(document).ready(function(){
    adjustLayout();
    /* your other page load code here*/
})

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

}
10
charlietfl

コードスニペットに関連して、最初に位置を設定する必要があります。

$(window).resize(function (){
    var $el = $('.className');
    $el.css('position', 'absolute').css({
        left: ($(window).width() - $el.width()) / 2,
        top: ($(window).height() - $el.height()) / 2
    });
});

static CSSスタイルを使用して位置属性を設定できます。

3
Matthias

@dimiの答えに基づいて、複数の要素でよりうまく機能します

$(".className").each(
    function () {
       $( this ).css("position","absolute");
       $( this ).css("left","50%");
       $( this ).css("margin-left", - $( this ).outerWidth()/2 );
       $( this ).css("top","50%");
       $( this ).css("margin-top", - $( this ).outerHeight()/2 );
       return this;
    }
);
1
mabi

最近、ブラウザウィンドウの中央にボックスを配置しようとしています。以下のコードを作成しました。 jQueryスクリプトは非常に長いです。なぜなら、誰かが設定した場合、htmlタグとbodyタグのすべての余白と余白を考慮に入れたからです。背景を気にしない場合は、winwidth、winheight、toppx、leftpx、および「#container」のみを設定する必要があります。残りは削除される場合があります。

<!DOCTYPE html>
<html>
<head>
    <title>Test of centre of container</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <style>
        html {
            background-color: #444;
            margin: 30px;
        }
        #wrapper {
            background-color: #777;
            width: 75%;
            margin: 0 auto;
            padding: 0;
        }
        #container {
            background-color: #ddd;
            border-radius: 10px;
            box-shadow: 0 0 2px #222;
            width: 200px;
            height: 100px;
            position: absolute;
            vertical-align: middle;
        }
        #extext {
            text-align: center;
            padding: 0;
        }
    </style>
</head>
<body>
    <script>
        function setDimensions() {
            var winwidth = $(window).width();
            var winheight = $(window).height();
            var htmlmv = parseInt($("html").css("margin-top")) + parseInt($("html").css("margin-bottom"));
            var htmlpv = parseInt($("html").css("padding-top")) + parseInt($("html").css("padding-bottom"));
            var htmlmh = parseInt($("html").css("margin-left")) + parseInt($("html").css("margin-right"));
            var htmlph = parseInt($("html").css("padding-left")) + parseInt($("html").css("padding-right"));
            var bodymv = parseInt($("body").css("margin-top")) + parseInt($("body").css("margin-bottom"));
            var bodypv = parseInt($("body").css("padding-top")) + parseInt($("body").css("padding-bottom"));
            var bodymh = parseInt($("body").css("margin-left")) + parseInt($("body").css("margin-right"));
            var bodyph = parseInt($("body").css("padding-left")) + parseInt($("body").css("padding-right"));
            var vspace = htmlmv + htmlpv + bodymv + bodypv;
            var hspace = htmlmh + htmlph + bodymh + bodyph;
            var wrapheight = winheight - vspace;
            var wrapwidth = winwidth - hspace;
            $("#wrapper").height(wrapheight);
            // $("#wrapper").width(wrapwidth);

            var toppx = (winheight - parseInt($("#container").css("height"))) / 2;
            var leftpx = (winwidth - parseInt($("#container").css("width"))) / 2;
            $("#container").css("top", toppx.toString() + "px");
            $("#container").css("left", leftpx.toString() + "px");
        }

        $(document).ready(function () {
            setDimensions();
        });
        $(window).resize(function () {
            setDimensions();
        });
    </script>
    <div id="wrapper">
        <div id="container">
            <p id="extext">Example text</p>
        </div>
    </div>
</body>
</html>




編集： CSS Tricks Webサイト でこれに対するより良い解決策を見つけましたが、CSSのみを使用しています:)。コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>
        Test centring!
    </title>
    <style>
        body div {
            background-color: red;
            box-shadow: 0 0 15px #222;
            border-radius: 10px;
            padding: 10px;
            margin: -150px auto auto -200px;
            width: 380px;
            height: 280px;
            position: absolute;
            top: 50%;
            left: 50%;
            text-align: center;
            line-height: 140px;
        }
        body div h2 {
            color: yellow;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div>
        <h2>
            Example text<br />
            Example Text
        </h2>
    </div>
</body>
</html>
0
Celdor

クラスの中心を持つ私のdivは、中央で水平方向に中央揃えする必要があり、その位置は固定されています。私はこの小さなコードを使用してそれを実現しています：

$(window).on('resize load', function () {
    $('.center').each(function () {
        $(this).css({
            'margin-left': ($('body').width() - $(this).width()) / 2
        });
    });
});

水平方向の配置にも同じ戦術を使用できます。ロード時とサイズ変更イベント時に一度に処理するので、このdivは常に中央にあります。

0
Lukas

このプラグインは非常に簡単に使用できます https://github.com/tenbullstech/jquery-make-me-center

$("div.box").makemecenter();
0
Aman Bansal

この JQuery.center プラグインを使用して、DOM要素を中央に配置します。コードは次のようになります。

$("#child").center()

前のコードは、その直接の親に対して相対的に中央に配置されます。別の親に対して相対的に中央に配置する必要がある場合は、次のようになります。

$("#child").center($("#parent"))

他の形態の集中化が必要な場合は、カスタマイズされたオプションがあります。

0
Mustafah