jquery设置li标签居中

在使用 jquery 对网页进行布局和设计时，有时我们需要将一个列表元素（li 标签）居中。下面将介绍如何使用 jquery 将一个 <ul> 标签下的 <li> 标签居中。

方法一：使用 flex 布局实现居中

Flex 布局是 CSS3 新增的一种布局方式，它可以快速的实现居中。

首先在 CSS 中设置 <ul> 标签的样式：

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

• display: flex;：将 <ul> 标签设置为 flex 布局。
• flex-wrap: wrap;：当 <li> 标签的数量超过一行时，自动换行。
• justify-content: center;：水平方向居中
• align-items: center;：垂直方向居中

此时，<ul> 下的 <li> 元素会自动居中。

方法二：使用 jQuery 计算偏移量居中

在某些情况下，我们可能无法使用 flex 布局，此时可以使用 jQuery 来计算偏移量从而将 <li> 居中。

居然设计家

居然之家和阿里巴巴共同打造的家居家装AI设计平台

64

查看详情

首先，需要给 <ul> 和 <li> 标签设置以下 CSS 样式：

ul {
   position: relative;
}

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

• position: relative;：为 <ul> 标签设置 position 属性，为后续设置绝对定位做准备。
• position: absolute;：为 <li> 标签设置 position 属性，使其绝对定位，此时可以根据父元素（<ul>）的坐标进行偏移。
• left: 50%;：使 <li> 元素相对于 <ul> 元素居中。
• transform: translateX(-50%);：由于 left: 50% 让 <li> 元素的左侧与 <ul> 元素的中心对齐，此时使用 transform 属性将 <li> 元素向左偏移 50% 即可完全居中。

现在，使用一段 jQuery 代码计算每个 <li> 标签需要的偏移量：

$(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(){});：监听页面 load 和 resize 事件，这样可以在任何时候动态改变屏幕大小时都能保证 <li> 元素居中。
• var parentWidth = $('ul').width();：取得父元素（<ul>）的宽度。
• var childWidth = $(this).outerWidth();：获取每个 <li> 元素的宽度。
• var leftOffset = (parentWidth - childWidth) / 2;：根据父元素宽度和 <li> 元素宽度计算出需要的偏移量。
• $(this).css('left', leftOffset + 'px');：将计算出来的偏移量应用到每个 <li> 元素的 left 属性中。

结语

以上是两种将 <li> 标签居中的实现方法，其中 flex 布局简单快速，且不需要使用 JavaScript，但兼容性较低。而使用 jQuery 计算偏移量的方法适用范围较广，但需要较多的代码和计算，不过是一种用 jQuery 方式实现居中的优秀范例。

以上就是jquery设置li标签居中的详细内容，更多请关注php中文网其它相关文章！