Comment puis-je centrer un élément DIV sur une page Web à l'aide de jQuery ?

Positionner un DIV de manière centrale sur la page Web avec jQuery

Le centrage d'un élément DIV sur l'écran est une exigence courante dans le développement Web . jQuery propose une solution pratique pour y parvenir.

Solution :

Pour centrer un DIV à l'aide de jQuery, vous pouvez exploiter la fonction suivante :

jQuery.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
}

Cette fonction modifie la position du DIV en calculant les coordonnées centrales en fonction de la taille de l'écran et du DIV dimensions.

Utilisation :

Une fois la fonction ajoutée à jQuery, vous pouvez simplement l'appeler sur le DIV cible en utilisant la syntaxe suivante :

$(element).center();

Cela centrera la DIV sur le écran.

Démo :

Pour démontrer cette fonction, vous pouvez vous référer au Fiddle suivant, qui comprend un paramètre supplémentaire pour contrôler la précision du centrage :

[Fiddle Link]

En utilisant cette fonction jQuery, vous pouvez facilement positionner n'importe quel élément DIV au centre de votre site Web. page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!