jquery设置li标签居中

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

标签下的
• 标签居中。

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

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

  首先在 CSS 中设置

  标签的样式：

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

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

  此时，

  下的
  • 元素会自动居中。

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

    

    传媒公司模板(RTCMS)1.0

    传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://

    下载

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

  • 居中。

    首先，需要给

    和
    • 标签设置以下 CSS 样式：

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

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

        现在，使用一段 jQuery 代码计算每个

      • 标签需要的偏移量：

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

        结语

        以上是两种将

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