jquery setzt das li-Tag auf die Mitte

Wenn wir jQuery zum Layouten und Entwerfen von Webseiten verwenden, müssen wir manchmal ein Listenelement (li-Tag) zentrieren. So verwenden Sie jQuery, um ein

-Tag unter einem

-Tag zu zentrieren.

Methode 1: Verwenden Sie das Flex-Layout, um eine Zentrierung zu erreichen.

Flex-Layout ist eine neue Layoutmethode in CSS3, mit der Sie schnell eine Zentrierung erreichen können.

Legen Sie zunächst den Stil des

-Tags in CSS fest:

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

• display: flex;: Stellen Sie das
  -Tag ein.
  • flex-wrap: wrap;: Wenn die Anzahl der
  • -Tags eine Zeile überschreitet, wird automatisch umgebrochen.
  • justify-content: center;: Horizontal zentriert
  • align-items: center;: Vertikal zentriert

  Zu diesem Zeitpunkt wird das

• -Element automatisch zentriert.

  Methode 2: Verwenden Sie jQuery, um den Versatz zu berechnen und zu zentrieren.

  In einigen Fällen können wir das Flex-Layout möglicherweise nicht verwenden. In diesem Fall können Sie jQuery verwenden, um den Versatz zu berechnen, um das

• zu zentrieren.

  Zunächst müssen Sie die folgenden CSS-Stile für die Tags

  festlegen:

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

  • position: relative;: Legen Sie das Positionsattribut für das Tag
    fest Positionierung.
    • position: absolute;: Legen Sie das Positionsattribut für das
    • fest. Zu diesem Zeitpunkt kann es entsprechend den Koordinaten des übergeordneten Elements (
      ) verschoben werden.
      • left: 50 %;: Zentriert das
      • -Element relativ zum
        • transform: translatorX(-50%);: Da left: 50% die linke Seite des
        • -Elements an der Mitte des
          -Elements ausrichtet, verwenden Sie das Transformationsattribut, um das
          • -Element zu verschieben. Bewegen Sie das Element um 50 %, um es vollständig zu zentrieren.

          Nun verwenden Sie einen jQuery-Code, um den für jedes

        • -Tag erforderlichen Offset zu berechnen:

          $(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 for Seitenlade- und Größenänderungsereignisse, sodass das
          • -Element immer zentriert bleiben kann, wenn die Bildschirmgröße dynamisch geändert wird.
          • var parentWidth = $('ul').width();: Ermittelt die Breite des übergeordneten Elements (
            ).
            • var childWidth = $(this).outerWidth();: Ermittelt die Breite jedes
            • -Elements.
            • var leftOffset = (parentWidth - childWidth) / 2;: Berechnen Sie den erforderlichen Offset basierend auf der Breite des übergeordneten Elements und der Breite des
            • -Elements.
            • $(this).css('left', leftOffset + 'px');: Wendet den berechneten Offset auf das linke Attribut jedes
            • an.

            Fazit

            Die oben genannten Methoden zum Zentrieren des

          • -Tags sind einfach und schnell und erfordern keine Verwendung von JavaScript, weisen jedoch eine geringe Kompatibilität auf. Die Methode zur Verwendung von jQuery zur Berechnung des Versatzes bietet ein breiteres Anwendungsspektrum, erfordert jedoch mehr Code und Berechnungen. Dies ist nur ein hervorragendes Beispiel für die Verwendung von jQuery zur Erzielung einer Zentrierung.

            Das obige ist der detaillierte Inhalt vonjquery setzt das li-Tag auf die Mitte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!