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 計算偏移量居中

      在某些情況下，我們可能無法使用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 方式實作居中的優秀範例。

                  以上是jquery設定li標籤居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！