aldiunanto.com

Membuat absolute div di tengah

Membuat div absolute di tengah - Aldi UnantoMungkin sudah banyak yang tahu bagaimana caranya membuat elemen <div> menjadi rata tengah dengan menggunakan teknik CSS margin: 0 auto; Namun cara tersebut tidak akan berfungsi jika <div> yang dibuat menggunakan absolute sebagai positioning-nya. Lalu bagaimana?

Absolute div rata tengah horizontal

Saya asumsikan anda memiliki sebuah tag <div> yang memiliki class bernama ‘first’ (<div class=”first”>)

Jika anda running, maka tag <div> anda pun akan segera berada di tengah layar secara horizontal. Namun dalam beberapa kasus kode ini tidak bisa bekerja jika kita menggunakan browser IE6, IE7, dan Chrome 20.0.1132.57. Tapi jangan takut, saya masih punya kode alternatif lainnya ko šŸ˜€ begini :

maka pastilah kode ini akan bekerja di semua browser. Sedikit penjelasan, mengapa margin-left diberi nilai -50px ? Hal ini bertujuan untuk melakukan pushing dan ‘melawan’ properti lain yaitu left: 50% dan <div> anda sendiri yang memiliki width berukuran 100px. Jadi kita harus memberi nilai minus untuk margin-left setengah dari nilai width. Jika <div> anda memiliki width sebesar 200px, maka margin-left – nya harus -100px. Mengerti kan? Lanjut…

 

Absolute div rata tengah horizontal & vertikal

Nah kalau tadi rata tengah hanya horizontal, pada sub ini akan dijelaskan untuk rata tengah vertikalnya. Cukup mudah, konsepnya sama seperti rata tengah horizontal yaitu memberikan properti left : 50% dan margin-left : (width / 2). Untuk rata tengah vertikal pun rumusnya adalah : top : 50% dan margin-top : (height / 2)

Dengan begini, kita akan menghasilkan sebuah tag <div> yang rata tengah secara horizontal dan vertikal. Oiya, kalau ingin melihat hasil live-nya, anda bisa lihat disini. Semoga bermanfaat, selamat mencoba!

Aldi Unanto | Membuat absolute div di tengah

One thought on “Membuat absolute div di tengah

Leave a Reply

%d bloggers like this: