jquery sets li tag to center

When using jQuery to layout and design web pages, sometimes we need to center a list element (li tag). Here's how to use jQuery to center a

tag under an

tag.

Method 1: Use flex layout to achieve centering

Flex layout is a new layout method in CSS3, which can quickly achieve centering.

First set the style of the

tag in CSS:

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

• display: flex;: Set the
  tag to flex layout.
  • flex-wrap: wrap;: When the number of
  • tags exceeds one line, wrap automatically.
  • justify-content: center;：Horizontally centered
  • align-items: center;：Vertically centered

  At this time, under

  • elements are automatically centered.

    Method 2: Use jQuery to calculate the offset and center it

    In some cases, we may not be able to use flex layout. In this case, we can use jQuery to calculate the offset so that

    First, you need to set the following CSS styles for the

    and
    • tags:

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

      • position: relative;: Set the position attribute for the
        tag, Prepare for subsequent absolute positioning settings.
        • position: absolute;: Set the position attribute for the
        • tag to make it absolutely positioned. At this time, it can be offset according to the coordinates of the parent element (
          ).
          • left: 50%;: Centers the
          • element relative to the
            element.
            • transform: translateX(-50%);: Since left: 50% aligns the left side of the
            • element with the center of the
              element, use the transform attribute to transform
              • The element is fully centered by being offset 50% to the left.

              Now, use a piece of jQuery code to calculate the offset required for each

            • tag:

              $(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(){});: Listen to the page load and resize events, so that the
              • element can be centered at any time when the screen size is dynamically changed.
              • var parentWidth = $('ul').width();: Get the width of the parent element (
                ).
                • var childWidth = $(this).outerWidth();: Get the width of each
                • element.
                • var leftOffset = (parentWidth - childWidth) / 2;: Calculate the required offset based on the width of the parent element and the width of the
                • element.
                • $(this).css('left', leftOffset 'px');: Applies the calculated offset to the left attribute of each
                • element.

                Conclusion

                The above are two implementation methods of centering the

              • tag. Among them, flex layout is simple and fast, and does not require the use of JavaScript, but has low compatibility. The method of using jQuery to calculate the offset has a wider range of applications, but requires more code and calculations. It is just an excellent example of using jQuery to achieve centering.

                The above is the detailed content of jquery sets li tag to center. For more information, please follow other related articles on the PHP Chinese website!