jquery définit la balise li au centre

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

en CSS :

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

Copier après la connexion
• display: flex; : définissez la balise
  .
  • flex-wrap: wrap; : Lorsque le nombre de balises
  • 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

• sous

  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

  • .

    Tout d'abord, vous devez définir les styles CSS suivants pour les balises

    et
    •  :

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

      Copier après la connexion
      • position : relatif; : pour
        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
        • 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
        • par rapport à l'élément
          • transform: translateX(-50%); : Depuis gauche : 50 % aligne le côté gauche de l'élément
          • avec le centre de l'élément
            transform < li> 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

          •  :

            $(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'); // 设置偏移量
               });
            });

            Copier après la connexion
            • $(window) . on('load resize',function(){}); : écoute les événements de chargement et de redimensionnement de la page, afin que l'élément
            • 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 (
              ).
              • var childWidth = $(this).outerWidth(); : Obtenez la largeur de chaque élément
              • 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
              • $(this).css('left', leftOffset + 'px'); : applique le décalage calculé à l'attribut gauche de chaque élément

              Conclusion

              Voici deux méthodes d'implémentation pour centrer la balise

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