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 25edfb22a4f469ecb59f1190150159c6 tag under an ff6d136ddc5fdfeffaf53ff6ee95f185 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 ff6d136ddc5fdfeffaf53ff6ee95f185 tag in CSS:

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

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

At this time, under ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c6 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 ff6d136ddc5fdfeffaf53ff6ee95f185 and 25edfb22a4f469ecb59f1190150159c6 tags:

ul {
   position: relative;
}

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

• position: relative;: Set the position attribute for the ff6d136ddc5fdfeffaf53ff6ee95f185 tag, Prepare for subsequent absolute positioning settings.
• position: absolute;: Set the position attribute for the 25edfb22a4f469ecb59f1190150159c6 tag to make it absolutely positioned. At this time, it can be offset according to the coordinates of the parent element (ff6d136ddc5fdfeffaf53ff6ee95f185).
• left: 50%;: Centers the 25edfb22a4f469ecb59f1190150159c6 element relative to the ff6d136ddc5fdfeffaf53ff6ee95f185 element.
• transform: translateX(-50%);: Since left: 50% aligns the left side of the 25edfb22a4f469ecb59f1190150159c6 element with the center of the ff6d136ddc5fdfeffaf53ff6ee95f185 element, use the transform attribute to transform 25edfb22a4f469ecb59f1190150159c6 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 25edfb22a4f469ecb59f1190150159c6 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 25edfb22a4f469ecb59f1190150159c6 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 (ff6d136ddc5fdfeffaf53ff6ee95f185).
• var childWidth = $(this).outerWidth();: Get the width of each 25edfb22a4f469ecb59f1190150159c6 element.
• var leftOffset = (parentWidth - childWidth) / 2;: Calculate the required offset based on the width of the parent element and the width of the 25edfb22a4f469ecb59f1190150159c6 element.
• $(this).css('left', leftOffset 'px');: Applies the calculated offset to the left attribute of each 25edfb22a4f469ecb59f1190150159c6 element.

Conclusion

The above are two implementation methods of centering the 25edfb22a4f469ecb59f1190150159c6 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!