jqueryはliタグを中央に設定します

jQuery を使用して Web ページのレイアウトとデザインを行う場合、リスト要素 (li タグ) を中央に配置する必要がある場合があります。ここでは、jQuery を使用して 25edfb22a4f469ecb59f1190150159c6 タグを ff6d136ddc5fdfeffaf53ff6ee95f185 タグの下の中央に配置する方法を示します。

方法 1: フレックス レイアウトを使用してセンタリングを実現します。

フレックス レイアウトは、CSS3 の新しいレイアウト方法であり、センタリングを迅速に実現できます。

まず、CSS で ff6d136ddc5fdfeffaf53ff6ee95f185 タグのスタイルを設定します:

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

• display: flex;: ff6d136ddc5fdfeffaf53ff6ee95f185 タグをフレックス レイアウトに設定します。
• flex-wrap: Wrap;: 25edfb22a4f469ecb59f1190150159c6 タグの数が 1 行を超える場合、自動的に折り返されます。
• justify-content: center;：水平方向の中央揃え
• align-items: center;：垂直方向の中央揃え

このとき、ff6d136ddc5fdfeffaf53ff6ee95f185 7de1fc63d80a86e066e26ce0e4ff5dfc 要素は自動的に中央に配置されます。

方法 2: jQuery を使用してオフセットを計算し、中央に配置する

場合によっては、フレックス レイアウトを使用できない場合があります。この場合、jQuery を使用してオフセットを計算できます。

; 中央揃えになります。

まず、ff6d136ddc5fdfeffaf53ff6ee95f185 タグと 25edfb22a4f469ecb59f1190150159c6 タグに次の CSS スタイルを設定する必要があります:

ul {
   position: relative;
}

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

• position:相対;: 位置属性を設定します。 ff6d136ddc5fdfeffaf53ff6ee95f185タグ、後続の絶対位置設定の準備をします。
• position:Absolute;: 25edfb22a4f469ecb59f1190150159c6タグのposition属性を設定して絶対位置にしますこの際、親要素(ff6d136ddc5fdfeffaf53ff6ee95f185)の座標に合わせてオフセットすることができます。
• left: 50%;: 25edfb22a4f469ecb59f1190150159c6 要素を ff6d136ddc5fdfeffaf53ff6ee95f185 要素に対して中央に配置します。
• transform: translationX(-50%);: left: 50% は 25edfb22a4f469ecb59f1190150159c6 要素の左側を ff6d136ddc5fdfeffaf53ff6ee95f185 要素の中心に揃えるため、transform 属性を使用して 5bbd8cb676e656435fc8b14a5652d081 要素は左に 50% オフセットされて完全に中央に配置されます。

ここで、jQuery コードの一部を使用して、各 25edfb22a4f469ecb59f1190150159c6 タグに必要なオフセットを計算します:

$(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('loadsize ' ,function(){});: ページの読み込みイベントとサイズ変更イベントをリッスンして、画面サイズが動的に変更されたときにいつでも
• 要素を中央に配置できるようにします。
• varparentWidth = $('ul').width();: 親要素の幅 (ff6d136ddc5fdfeffaf53ff6ee95f185) を取得します。
• var childWidth = $(this).outerWidth();: 各 25edfb22a4f469ecb59f1190150159c6 要素の幅を取得します。
• var leftOffset = (parentWidth - childWidth) / 2;: 親要素の幅と 25edfb22a4f469ecb59f1190150159c6 要素の幅に基づいて必要なオフセットを計算します。
• $(this).css('left', leftOffset 'px');: 計算されたオフセットを各 25edfb22a4f469ecb59f1190150159c6 要素の left 属性に適用します。

結論

25edfb22a4f469ecb59f1190150159c6タグをセンタリングする実装方法は上記の2つですが、その中でもFlexレイアウトはJavaScriptを使わずに簡単かつ高速に実装できます。しかし互換性は低いです。 jQuery を使用してオフセットを計算する方法は応用範囲が広いですが、より多くのコードと計算が必要になりますが、これは jQuery を使用してセンタリングを実現する優れた例にすぎません。

以上がjqueryはliタグを中央に設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。