Perpustakaan Anshori

Antara Mas.. Wahyu.. dan Anshori…

CSS – Membuat elemen div Center

Posted by anshoriwahyu on July 4, 2013


Html5 CSS3

Bintaro – Ehm.. 3 bulan yah dari postingan terakhir gw di blog tutorial ga jelas ini. Harap maklum yah, mau gimana lagi. Bener-bener lagi (sok) sibuk banget soale dari terakhir gw nulis di blog ini.

Sekarang gw mau share sedikit tutorial simple yang gampang banget dan buat para web master pasti bilang “kok tutorial spele kaya gini aja pake ditulis, biar eksis yah…”😀 Tutorial gimana cara bikin CENTER suatu elemen di website. Maksute gimana?? Bingung gw cara jelasin spesifiknya kaya gimana kalo lewat tulisan… Enaknya coba liat deh contoh halaman ini deh.. http://anshori.net/wp-tut/130407-center-elm-css-2.php

Nah udah paham bin ngarti belom? coba deh di halaman itu size view browser di besarin atau di kecilin… posisi Elemen itu masi tetep di tengah. Semoga dah paham bin ngarti apa yg mau gw share tutorialnya yah.. Yuk langsung aja menuju ke tujuan penjelasannya…


Di dalam elemen buat satu elemen dengan ID bebas mau dinamain apa, tapi untuk contoh disini gw gunain ID=”center” . Liat quotes CSS dibawah untuk bikin tahap awal men-center-kan elemen

#center {
width: 450px;
height: 200px;
border: 1px #000 solid;
position: absolute;
top: 50%;
left: 50%;
background-color: #888;
}

Yup.. Sekarang coba di cocok-kan sama yang udah gw buat deh.. Sama atau ga? diusahakan sama yah, soale gambar dibawah ini penjelasannya itu dari link yang gw share.. http://anshori.net/wp-tut/130407-center-elm-css-1.php

center-elm-css-2

Kok masih belom center? Yup.. Coba perhatikan gambar tersebut.. posisi center dari CSS top:50% dan left:50% itu berada di sudut kiri atas element ID Center (liat keterangan gambar titik pusat center). Nah sekarang mari dibuat elemen width: 400px; dan height: 200px; itu jadi center. logika dasarnya itu adalah gimana caranya buat element itu geser kekiri dan kemudian geser keatas biar posisinya itu jadi CENTER. Gunakan Properti MARGIN tapi yang lebih spesifik, MARGIN-LEFT dan MARGIN-TOP.. yang patut dicatat disini adalah deklarasikan dulu yah WIDTH dan HEIGHT dari element tersebut biar mudah membuat jadi CENTER.

#center {
width: 450px;
height: 200px;
border: 1px #000 solid;
position: absolute;
top: 50%;
left: 50%;
background-color: #888;
margin-left: -225px;
margin-top: -100px;
}

Perhatikan gambar berikut..

center-elm-css-3

Nilai margin tersebut adalah setengah dari properti width dan height elemen tersebut. jadi misalnya width element tersebut adalah 900px jadi nilai dari properti margin-left adalah -450px. Untuk contoh hasilnya sumonggo cek di link ini … http://anshori.net/wp-tut/130407-center-elm-css-2.php

Semoga bermanfaat yah tutorial yang spele ini, ditunggu masukan dan pertanyaannya.. Regards

Ref: http://css-tricks.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: