Pada kesempatan kali ini saya akan menjelaskan cara membuat element html berada di tengah. Mungkin sebagian banyak dari teman-teman sudah tau cara membuat suatu element berada di tengah layar, cukup menggunakan property css margin:auto; . Namun sebagian hanya sebatas tahu dan belum paham kapan saat yang tepat untuk menggunakan property tersebut, jika teman-teman implementasikan ke project template sekala besar, yang pastinya membutuhkan banyak element di dalam nya, dan tidak sedikit sebagian teman-teman yang terkadang kesulitan, untuk mengatur property tersebut. Di sini saya akan membagi tips dan trik kapan dan dimana saat yang tepat untuk menggunakan property tersebut.

Berikut Contoh nya :

  • Saya ingin membuat contoh element seperti di bawah ini:

membuat-element-html-berada-di-tengah

Berikut source code nya :

keterangan :

  • Terlihat seperti kode margin di atas, margin:auto; sebaiknya di sertakan pada selektor css body, karena pada bagian body tersebut dimana adalah pembungkus awal dari semua struktur yang ada di dalam nya, maka dari itu untuk sebaiknya pada bagian body di html, di gunakan property margin:auto , supaya berada di tengah browser. Tidak hanya itu, selain property margin:auto tersebut, ada beberapa property lain nya yang menurut saya wajib di sertakan untuk memudahkan teman-teman membuat suatu template, seperti (width atau panjang, height atau lebar).
  • Terlihat pada kode css di selektor element class tengah yang satu tingkat di dalam si body. untuk element yang satu tingkat di dalam dari si body, sebaiknya di sertakan juga selektor margin:auto; , kenapa demikian ? Karena suatu saat ketika ukuruan panjang dari body lebih besar dari element yang satu tingkat di dalam nya, efek element tersebut akan berada di posisi kiri dan akan menyisakan ruang kosong di sebelah kanan body, maka dari itu sangat saya sarankan untuk menggunakan property margin tersebut di element yang berada satu tingkat di dalam si body.

Sampai disini penjelasan saya mengenai cara membuat element html berada di tengah, semoga bermanfaat.