web-dev-qa-db-fra.com

Centrer une div verticalement et horizontalement à l'aide de jQuery

J'utilise ce script pour centrer ma div horizontalement et verticalement.

Lorsque la page se charge, le div est centré verticalement, pas horizontalement jusqu'à ce que je redimensionne le navigateur.

Qu'est-ce que je fais mal?

$(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

J'utilise normalement cette "technique":

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

MISE À JOUR:

Je mets à jour la solution, comme suggéré par l'utilisateur Fred K, en utilisant .outerWidth() et .outerHeight() pour avoir un centrage plus précis.

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

Quelques notes supplémentaires de la documentation de jQuery ( .outerWidth() , .outerHeight() ):

  • Le nombre renvoyé par les API liées aux dimensions, y compris .outerWidth (), peut être fractionnaire dans certains cas. Le code ne doit pas supposer qu'il s'agit d'un entier. En outre, les dimensions peuvent être incorrectes lorsque la page est agrandie par l'utilisateur; les navigateurs n'exposent pas d'API pour détecter cette condition.

  • La valeur signalée par .outerWidth () n'est pas garantie pour être exacte lorsque le parent de l'élément est masqué. Pour obtenir une valeur précise, vous devez d'abord afficher le parent avant d'utiliser .outerWidth ().

MISE À JOUR 2:

Une mise à jour simple pour montrer comment vous pouvez utiliser this à l'intérieur de la méthode css() au cas où il y aurait plus d'éléments avec la même balise class avec des tailles différentes.

$(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

utilisez-le pour centrer:

$.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

Enveloppez le code du gestionnaire dans une fonction afin que vous puissiez appeler cette fonction à la fois au chargement de la page ainsi que le gestionnaire pour $(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

En ce qui concerne votre extrait de code, vous devez d'abord définir la position:

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

Vous pourriez peut-être définir l'attribut position via un style CSS statique.

3
Matthias

basé sur la réponse de @ dimi, fonctionne mieux avec plusieurs éléments

$(".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

J'ai récemment essayé de placer une boîte au milieu d'une fenêtre de navigateur. J'ai créé le code ci-dessous. Le script jQuery est assez long car j'ai pris en compte tous les remplissages et marges des balises html et body, si quelqu'un les a définis. Si l'on ne se soucie pas des arrière-plans, alors seuls winwidth, winheight, toppx, leftpx et "#container" doivent être définis. Le reste peut être supprimé.

<!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>




EDIT: J'ai trouvé une bien meilleure solution pour cela sur site Web CSS Tricks et il utilise uniquement CSS :). Le code est ci-dessous:

<!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

mon div avec le centre de classe doit être centré horizontalement au milieu et sa position est fixe. J'utilise ce petit code pour y arriver:

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

vous pouvez également utiliser les mêmes tactiques pour l'alignement horizontal. Jetez un coup d'œil qu'il gère à la fois lors des événements de chargement et de redimensionnement, de sorte que ce div est toujours au milieu.

0
Lukas

Vous pouvez utiliser ce plugin qu'il est très simple à utiliser https://github.com/tenbullstech/jquery-make-me-center

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

J'utilise ce plugin JQuery.center pour centrer mes éléments DOM. Le code ressemblera à ceci:

$("#child").center()

Le code précédent sera centré par rapport à son parent direct, si vous devez centrer par rapport à un autre parent, ce sera:

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

Il existe des options personnalisées, si vous avez besoin d'une autre forme de centralisation.

0
Mustafah