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.
1
2
3
4
5
| .elemen{ width : 250px ; height : 100px ; margin : 0 auto ; } |
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.
1
2
3
4
5
6
7
8
| .elemen{ width : 250px ; height : 100px ; position : absolute ; margin : -50px 0 0 -125px ; left : 50% ; top : 50% ; } |
- 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.
- 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?
- 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.
- 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:
1
2
3
4
| .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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| $(document).ready( function () { $(window).resize( function () { $( '.elemen' ).css({ position: 'absolute' , left: ($(window).width() - $( '.elemen' ).outerWidth()) / 2, top: ($(window).height() - $( '.elemen' ).outerHeight()) / 2 }); }); $(window).resize(); }); |
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.
- left untuk menambahkan properti css pada elemen.
- ($(window).width() untuk mengambil lebar halaman secara kontinyu kemudian di kurangi...
- $('.elemen').outerWidth()) / 2 untuk mengambil keseluruhan lebar elemen termasuk margin secara kontinyu kemudian di bagi 2
0 komentar:
Posting Komentar