Bagaimanakah Saya Boleh Memusatkan Elemen DIV pada Halaman Web Menggunakan jQuery?

Menempatkan DIV Secara Berpusat pada Halaman Web dengan jQuery

Memusatkan elemen DIV pada skrin adalah keperluan biasa dalam pembangunan web . jQuery menawarkan penyelesaian yang berguna untuk mencapainya.

Penyelesaian:

Untuk memusatkan DIV menggunakan jQuery, anda boleh memanfaatkan fungsi berikut:

jQuery.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
}

Fungsi ini mengubah suai kedudukan DIV dengan mengira koordinat tengah berdasarkan saiz skrin dan DIV dimensi.

Penggunaan:

Setelah fungsi ditambahkan pada jQuery, anda boleh memanggilnya pada DIV sasaran menggunakan sintaks berikut:

$(element).center();

Ini akan memusatkan DIV pada skrin.

Demo:

Untuk menunjukkan fungsi ini, anda boleh merujuk pada Fiddle berikut, yang termasuk parameter tambahan untuk mengawal ketepatan pemusatan:

[Pautan Fiddle]

Dengan menggunakan fungsi jQuery ini, anda boleh meletakkan mana-mana elemen DIV dengan mudah di tengah-tengah web anda halaman.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Elemen DIV pada Halaman Web Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!