jquery définit la balise li au centre

Lorsque nous utilisons jQuery pour mettre en page et concevoir des pages Web, nous devons parfois centrer un élément de liste (balise li). Voici comment utiliser jQuery pour centrer une balise 25edfb22a4f469ecb59f1190150159c6 sous une balise ff6d136ddc5fdfeffaf53ff6ee95f185

Méthode 1 : Utilisez la mise en page flexible pour réaliser le centrage

La mise en page flexible est une nouvelle méthode de mise en page en CSS3, qui permet d'obtenir rapidement un centrage.

Définissez d'abord le style de la balise ff6d136ddc5fdfeffaf53ff6ee95f185 en CSS :

ul {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}

• display: flex; : définissez la balise ff6d136ddc5fdfeffaf53ff6ee95f185 .
• flex-wrap: wrap; : Lorsque le nombre de balises 25edfb22a4f469ecb59f1190150159c6 dépasse une ligne, le retour à la ligne est automatique.
• justify-content: center;：Centré horizontalement
• align-items: center;：Centré verticalement

À l'heure actuelle, l'élément 25edfb22a4f469ecb59f1190150159c6 sous ff6d136ddc5fdfeffaf53ff6ee95f185

Méthode 2 : Utilisez jQuery pour calculer le décalage et le centre

Dans certains cas, nous ne pourrons peut-être pas utiliser la mise en page flexible. Dans ce cas, nous pouvons utiliser jQuery pour. calculer le décalage. Centre 25edfb22a4f469ecb59f1190150159c6.

Tout d'abord, vous devez définir les styles CSS suivants pour les balises ff6d136ddc5fdfeffaf53ff6ee95f185 et 25edfb22a4f469ecb59f1190150159c6 :

ul {
   position: relative;
}

li {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

• position : relatif; : pour ff6d136ddc5fdfeffaf53ff6ee95f185 L'étiquette définit l'attribut de position pour préparer les paramètres de positionnement absolu ultérieurs.
• position: absolue; : définissez l'attribut de position pour la balise 25edfb22a4f469ecb59f1190150159c6 pour la rendre absolument positionnée. À ce stade, elle peut être décalée en fonction des coordonnées de l'élément parent (
• left : 50 % ; : centre l'élément 25edfb22a4f469ecb59f1190150159c6 par rapport à l'élément ff6d136ddc5fdfeffaf53ff6ee95f185
• transform: translateX(-50%); : Depuis gauche : 50 % aligne le côté gauche de l'élément 25edfb22a4f469ecb59f1190150159c6 avec le centre de l'élément ff6d136ddc5fdfeffaf53ff6ee95f185 transform 8e22c81817d224bf490a20f8d20d8ac9 L'élément est décalé de 50 % vers la gauche pour être complètement centré.

Maintenant, utilisez un morceau de code jQuery pour calculer le décalage requis pour chaque balise 25edfb22a4f469ecb59f1190150159c6 :

$(window).on('load resize',function(){
   var parentWidth = $('ul').width(); // 父元素宽度
   $('li').each(function(){
      var childWidth = $(this).outerWidth(); // 子元素宽度
      var leftOffset = (parentWidth - childWidth) / 2; // 计算偏移量
      $(this).css('left', leftOffset + 'px'); // 设置偏移量
   });
});

• $(window) . on('load resize',function(){}); : écoute les événements de chargement et de redimensionnement de la page, afin que l'élément 25edfb22a4f469ecb59f1190150159c6 puisse être centré chaque fois que la taille de l'écran est modifiée de manière dynamique.
• var parentWidth = $('ul').width(); : Obtenez la largeur de l'élément parent (ff6d136ddc5fdfeffaf53ff6ee95f185).
• var childWidth = $(this).outerWidth(); : Obtenez la largeur de chaque élément 25edfb22a4f469ecb59f1190150159c6
• var leftOffset = (parentWidth - childWidth) / 2; : Calculez le décalage requis en fonction de la largeur de l'élément parent et de la largeur de l'élément 25edfb22a4f469ecb59f1190150159c6
• $(this).css('left', leftOffset + 'px'); : applique le décalage calculé à l'attribut gauche de chaque élément 25edfb22a4f469ecb59f1190150159c6

Conclusion

Voici deux méthodes d'implémentation pour centrer la balise 25edfb22a4f469ecb59f1190150159c6 de JavaScript, mais est compatible avec le sexe inférieur. La méthode d'utilisation de jQuery pour calculer le décalage a une gamme d'applications plus large, mais nécessite plus de code et de calculs. Ce n'est qu'un excellent exemple d'utilisation de jQuery pour réaliser le centrage.

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!