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 25edfb22a4f469ecb59f1190150159c6-Tag unter einem ff6d136ddc5fdfeffaf53ff6ee95f185-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 ff6d136ddc5fdfeffaf53ff6ee95f185-Tags in CSS fest:

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

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

Zu diesem Zeitpunkt wird das 25edfb22a4f469ecb59f1190150159c6-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 25edfb22a4f469ecb59f1190150159c6 zu zentrieren.

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

ul {
   position: relative;
}

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

• position: relative;: Legen Sie das Positionsattribut für das Tag ff6d136ddc5fdfeffaf53ff6ee95f185 fest Positionierung.
• position: absolute;: Legen Sie das Positionsattribut für das 25edfb22a4f469ecb59f1190150159c6 fest. Zu diesem Zeitpunkt kann es entsprechend den Koordinaten des übergeordneten Elements (ff6d136ddc5fdfeffaf53ff6ee95f185) verschoben werden.
• left: 50 %;: Zentriert das 25edfb22a4f469ecb59f1190150159c6-Element relativ zum ff6d136ddc5fdfeffaf53ff6ee95f185
• transform: translatorX(-50%);: Da left: 50% die linke Seite des 25edfb22a4f469ecb59f1190150159c6-Elements an der Mitte des ff6d136ddc5fdfeffaf53ff6ee95f185-Elements ausrichtet, verwenden Sie das Transformationsattribut, um das 25edfb22a4f469ecb59f1190150159c6-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 25edfb22a4f469ecb59f1190150159c6-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 25edfb22a4f469ecb59f1190150159c6-Element immer zentriert bleiben kann, wenn die Bildschirmgröße dynamisch geändert wird.
• var parentWidth = $('ul').width();: Ermittelt die Breite des übergeordneten Elements (ff6d136ddc5fdfeffaf53ff6ee95f185).
• var childWidth = $(this).outerWidth();: Ermittelt die Breite jedes 25edfb22a4f469ecb59f1190150159c6-Elements.
• var leftOffset = (parentWidth - childWidth) / 2;: Berechnen Sie den erforderlichen Offset basierend auf der Breite des übergeordneten Elements und der Breite des 25edfb22a4f469ecb59f1190150159c6-Elements.
• $(this).css('left', leftOffset + 'px');: Wendet den berechneten Offset auf das linke Attribut jedes 25edfb22a4f469ecb59f1190150159c6 an.

Fazit

Die oben genannten Methoden zum Zentrieren des 25edfb22a4f469ecb59f1190150159c6-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!