Kategori : CSS, HTML, jQuery11 Juli 2013 09:59:09

Centering Element menggunakan CSS dan jQuery Part 1

Membuat sebuah element berada ditengah (Centering Element) secara horizontal bisa dilakukan dengan mudah, hanya dengan tag html atau 1 baris CSS saja hal ini bisa dilakukan. Namun lain halnya dengan membuat sebuah element berada ditengah (Centering Element) secara horizontal dan vertical. Untuk membuat sebuah element berada pada posisi center secara horizontal dan vertical (center screen) bisa dilakukan dengan dua cara, bisa menggunakan CSS dan jQuery.

Centering Element menggunakan CSS

Untuk membuat sebuah element berada di tengah layar (center screen), hal pertama yang harus dilakukan adalah membuat element yang akan dibuat center tentunya hehe. Sebagai contoh disini saya menggunakan sebuah <div> yang didalamnya berisi image.

<html>
  <head>
  	<title>Test Center</title>
  </head>
  <body>
    <div id="cent">
    	<img src="img.png" width="128" height="128">
    </div>
  </body>
</html>

Jika code diatas di run pada sebuah browser maka akan menghasilkan tampilan seperti ini.

Untuk membuat div tersebut center horizontal dan vertical, digunakan CSS sebagai berikut :

<style>
#cent{
	width:128px;
	height:128px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-64px;
	margin-top:-64px;
}
</style>

Pertama tentukan width dan height untuk menjamin element ditampilkan sesuai dengan ukuran yang diinginkan, lalu set position absolute, ini berguna agar element absolute terhadap layar. Selanjutnya set top dan left pada 50%, agar element berada pada 50% dari atas dan kiri layar. Belum selesai disini, karena jika hanya diset seperti ini maka element akan berada center tetapi pada koordinat element (0,0), agar element benar-benar berada ditengah layar, set margin-left dan margin-top pada posisi minus dari setengah tinggi dan lebar element. Hal ini akan membuat posisi element benar-benar pada center screen.

Full Code :

<html>
  <head>
	<title>Test Center</title>
    <style>
    #cent{
        width:128px;
        height:128px;
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-64px;
        margin-top:-64px;
    }
    </style>
  </head>
  <body>
    <div id="cent">
    	<img src="img.png" width="128" height="128">
    </div>
  </body>
</html>

Ketika code diatas di run di browser, tampilannya adalah sebagai berikut :

Selamat mencoba. :D.

Untuk centering element menggunakan jQuery akan saya bahas pada post selanjutnya.

Centering Element menggunakan CSS dan jQuery Part 2

Kategori : CSS, HTML, jQuery11 Juli 2013 09:59:09

Kategori :

Arsip :