jQuery Centering Elemen Vertikal Horisontal

Artikel kali ini akan membahas tentang cara memposisikan suatu elemen agar berada tepat di tengah halaman secara seimbang baik secara vertikal maupun horisontal menggunakan jQuery. Selain itu kita akan membandingkan antara centering elemen menggunakan CSS murni dengan centering elemen menggunakan jQuery. Setelah dipahami silahkan memilih mana cara yang terbaik untuk memposisikan suatu elemen pada bagian tengah halaman. Cara ini biasanya digunakan untuk menampilkan popout baik yang berisi gambar, peringatan atau pun iklan.

CSS Centering Horisontal

Kode CSS dibawah ini merupakan cara yang paling banyak digunakan untuk memposisikan suatu elemen agar berada di tengah halaman secara horisontal namun tidak jika dilihat dari sisi vertikal.

.elemen{
    width: 250px;
    height: 100px;
    margin: 0 auto;
}

Demo CSS Centering Horisontal

Kunci untuk memposisikan elemen ini ada pada kode margin: 0 auto, yang jika kita jabarkan maka; elemen memiliki jarak margin atas bawah sebesar 0, dan memiliki jarak margin kiri kanan dengan pengesetan auto. auto digunakan untuk menyesuaikan elemen secara otomatis sesuai dengan lebar halaman.

CSS Centering Horisontal dan Vertikal

Dibawah ini kode CSS yang sering digunakan untuk memposisikan elemen agar berada ditengah-tengah halaman secara horizontal dan vertikal. Namun terkadang menghasilkan posisi yang tidak simetris (jika salah perhitungan) apabila jarak diukur antara sisi kiri dengan sisi kanan, sisi atas dengan sisi bawah.

.elemen{
    width: 250px;
    height: 100px;
    position: absolute;
    margin: -50px 0 0 -125px;
    left: 50%;
    top: 50%;
}

Demo CSS Centering Horisontal dan Vertikal

Kunci untuk memposisikan elemen ini ada pada kode:

1. position: absolute = ini digunakan untuk memposisikan elemen agar elemen memiliki posisi yang absolut (mutlak) terhadap halaman. Maksudnya, agar elemen tidak mengikuti pada aturan-aturan lain yang diterapkan pada elemen lain diluar dirinya.
2. margin: -50px 0 0 -125px = ini merupakan kunci untuk memposisikan elemen. Nilai-nilai ini diperoleh dari hasil pembagian lebar dan tinggi elemen. Margin atas di beri nilai -50px, ini diperoleh dari pembagian height. Height atau tinggi di set dengan nilai 100px, maka apabila di bagi 2 (100:2) akan di peroleh nilai 50px. Nilai 50px ini yang kemudian digunakan untuk menentukan margin atas. Sedangkan margin kiri di beri nilai -125px, ini juga di perolah dari pembagian width. Width atau lebar di set dengan nilai 250px, maka apabila di bagi 2 (250:2) akan diperoleh nilai 125px. Kemudian nilai 125px ini digunakan untuk menentukan margin kiri. Namun kenapa margin kiri dan margin atas diberi nilai negatif?
3. left:50% dan top:50% = nilai 50% digunakan untuk memposisikan elemen agar berada tepat di tengah-tengah halaman, sehingga jarak elemen dari atas halaman dan dari kiri halaman ditentukan setengahnya atau 50%. Namun harus diingat, nilai 50% ini akan membuat elemen berada tepat ditengah-tengah halaman seandainya elemen tersebut memiliki luas 1px. Sedangkan elemen yang di buat memiliki lebar 250px dan tinggi 100px.
4. Perhatikan gambar di bawah ini! Elemen yang berwarna kuning adalah posisi elemen semula ketika semua margin (atas bawah kiri kanan) diberi nilai 0. Itulah mengapa hasil pembagian lebar (125px) dan hasil pembagian tinggi (50px) kemudian di ubah menjadi minus, tujuannya agar posisi titik tengah dari elemen benar-benar berada di tengah-tengah halaman.

jQuery Centering Horisontal dan Vertikal

Penggunaan script jQuery ini sebenarnya untuk menyederhanakan penggunaan kode CSS, sehingga ketika kita ingin memposisikan sebuah elemen tepat di tengah-tengah layar, maka tidak diperlukan perhitungan seperti halnya cara diatas (CSS Centering Horisontal dan Vertikal). jQuery akan melakukan perhitungan sendiri secara otomatis, sehingga tidak perlu lagi menuliskan nilai-nilai (margin, left, top) secara manual. Cukup dengan mendeklarasikan elemen, kemudian integrasikan elemen tersebut dengan jQuery, seperti dibawah ini:

Kode CSS
Dibawah ini adalah properti CSS untuk elemen:

.elemen{
    width:250px;
    height:100px;
}

Kode diatas hanya menentukan lebar dan tinggi dari elemen tanpa menentukan posisi elemen terhadap halaman.

Kode jQuery
Dibawah ini adalah kode jQuery untuk membuat posisi elemen otomatis di tengah halaman:

$(document).ready(function () {

    $(window).resize(function () {

        $('.elemen').css({
            position: 'absolute',
            left: ($(window).width() - $('.elemen').outerWidth()) / 2,
            top: ($(window).height() - $('.elemen').outerHeight()) / 2
        });

    });

    $(window).resize();

});

Demo jQuery Centering Horisontal dan Vertikal

Kerja Kode jQuery

$(window).resize

Ini terdiri dari 2 kode, kode awal berfungsi untuk merekam lebar dan tinggi halaman yang sedang dibuka secara kontinyu, dan kode yang terakhir untuk menjalankan fungsi secara kontinyu.

$('.elemen').css({

Ini digunakan untuk menambahkan poperti css pada elemen

position: 'absolute'

Ini menambahkan properti position pada elemen

left: ($(window).width() - $('.elemen').outerWidth()) / 2

Jika anda memahami CSS Centering Horisontal dan Vertikal maka kode jQuery inilah yang berfungsi untuk mengambil alih proses perhitungan manual menjadi otomatis. Silahkan perhatikan dengan seksama.

1. left untuk menambahkan properti css pada elemen.
2. ($(window).width() untuk mengambil lebar halaman secara kontinyu kemudian di kurangi...
3. $('.elemen').outerWidth()) / 2 untuk mengambil keseluruhan lebar elemen termasuk margin secara kontinyu kemudian di bagi 2

Demikian selanjutnya dengan top: ($(window).height()-$('.elemen').outerHeight())/2

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Pranala Luar:
[1] jQuery .resize()
[2] jQuery .width()
[3] jQuery .outerWidth()
[4] jQuery .height()
[5] jQuery .outerHeight()

jQuery