jqueryはliタグを中央に設定します-フロントエンドQ&A-php.cn

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

タグを

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

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

まず、CSS で

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

ログイン後にコピー

display: flex;:
- flex-wrap: Wrap;:
- タグの数が 1 行を超える場合、自動的に折り返されます。
- justify-content: center;：水平方向の中央揃え
- align-items: center;：垂直方向の中央揃え
このとき、
- ; 中央揃えになります。
  まず、
  - タグに次の CSS スタイルを設定する必要があります:
```
ul { position: relative; } li { position: absolute; left: 50%; transform: translateX(-50%); }
```
    ログイン後にコピー
    - position:相対;: 位置属性を設定します。
      - position:Absolute;:
      - タグのposition属性を設定して絶対位置にしますこの際、親要素(
        )の座標に合わせてオフセットすることができます。
        left: 50%;:
        
        要素を
        要素に対して中央に配置します。
        transform: translationX(-50%);: left: 50% は
        
        要素の左側を
        要素の中心に揃えるため、transform 属性を使用して < を変換します;li> 要素は左に 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('loadsize ' ,function(){});: ページの読み込みイベントとサイズ変更イベントをリッスンして、画面サイズが動的に変更されたときにいつでも
        
        要素を中央に配置できるようにします。
        
        varparentWidth = $('ul').width();: 親要素の幅 (
        ) を取得します。
        var childWidth = $(this).outerWidth();: 各
        
        要素の幅を取得します。
        
        var leftOffset = (parentWidth - childWidth) / 2;: 親要素の幅と
        
        要素の幅に基づいて必要なオフセットを計算します。
        
        $(this).css('left', leftOffset 'px');: 計算されたオフセットを各
        
        要素の left 属性に適用します。
        
        結論
        
        タグをセンタリングする実装方法は上記の2つですが、その中でもFlexレイアウトはJavaScriptを使わずに簡単かつ高速に実装できます。しかし互換性は低いです。 jQuery を使用してオフセットを計算する方法は応用範囲が広いですが、より多くのコードと計算が必要になりますが、これは jQuery を使用してセンタリングを実現する優れた例にすぎません。
        以上がjqueryはliタグを中央に設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。