jquery menetapkan li tag ke tengah

Apabila menggunakan jQuery untuk susun atur dan mereka bentuk halaman web, kadangkala kita perlu memusatkan elemen senarai (li tag). Berikut ialah cara menggunakan jQuery untuk memusatkan teg

Kaedah 1: Gunakan reka letak fleksibel untuk mencapai pemusatan

Reka letak fleksibel ialah kaedah reka letak baharu dalam CSS3, yang boleh mencapai pemusatan dengan cepat.

Mula-mula tetapkan gaya teg

dalam CSS:

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

• paparan: flex;: Tetapkan teg
  • flex-wrap: wrap;: Apabila bilangan tag
  • melebihi satu baris, balut secara automatik.
  • justify-content: center;: horizontally centered
  • align-item: center;: vertically centered

  Pada masa ini, di bawah

  elemen li>

  Kaedah 2: Gunakan jQuery untuk mengira offset dan tengahkannya

  Dalam sesetengah kes, kami mungkin tidak dapat menggunakan reka letak flex Dalam kes ini, kami boleh menggunakan jQuery untuk mengira offset ke tengah

  Pertama, anda perlu menetapkan gaya CSS berikut untuk teg

  dan
  • teg
    , Sediakan untuk tetapan kedudukan mutlak seterusnya.
    kedudukan: mutlak;: Tetapkan atribut kedudukan untuk teg
    • pada masa ini, ia boleh diimbangi mengikut koordinat elemen induk (
      ) .
      kiri: 50%;: Memusatkan elemen
      transform: translateX(-50%);: Sejak kiri: 50% menjajarkan bahagian kiri elemen
      • dengan pusat elemen
        ;li> Elemen dipusatkan sepenuhnya dengan diimbangi 50% ke kiri.
        • Sekarang, gunakan sekeping kod jQuery untuk mengira offset yang diperlukan untuk setiap teg
        • :

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

        $(window).on('load resize ' ,function(){});: Dengar pemuatan halaman dan ubah saiz peristiwa, supaya elemen

        • boleh dipusatkan pada bila-bila masa apabila saiz skrin diubah secara dinamik.
          var parentWidth = $('ul').width();: Dapatkan lebar elemen induk (
          ).
          • var childWidth = $(this).outerWidth();: Dapatkan lebar setiap elemen
          • var leftOffset = (parentWidth - childWidth) / 2;: Kira offset yang diperlukan berdasarkan lebar elemen induk dan lebar elemen
          • $(this).css('left', leftOffset + 'px');: Menggunakan offset yang dikira pada atribut kiri setiap elemen
          • Kesimpulan
          Di atas ialah dua kaedah pelaksanaan untuk memusatkan teg
          • keserasian rendah. Kaedah menggunakan jQuery untuk mengira offset mempunyai julat aplikasi yang lebih luas, tetapi memerlukan lebih banyak kod dan pengiraan Ia hanyalah contoh terbaik menggunakan jQuery untuk mencapai pemusatan.

            Atas ialah kandungan terperinci jquery menetapkan li tag ke tengah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!