Cara Simple Membuat Gambar pada Widget Otomatis Rata Tengah

loading...

Selamat datang di The Royal Moringa. Ketika anda memasang sebuah widget pada blog/website, anda mungkin anda pernah menjumpai beberapa masalah. Salah satu yang sering dialami adalah pada saat kita menambahkan gadget HTML/JavaScript dengan kode script yang kita miliki. Terkadang hasil dari kode script yang telah kita pasang tidak sesuai dengan yang kita inginkan atau tidak sesuai contoh yang anda lihat. Nah, kali ini saya akan lebih fokus pada permasalahan saat kita memberikan gambar pada widget yang kita tambahkan tadi. Gambar yang kita tambahkan tadi ternyata tidak berada di tengah mungkin berada di pojok kiri atau di pojok kanan widget. Mengapa hal ini terjadi?

Sebenarnya hal ini dapat terjadi karena tidak adanya pengaturan yang diberikan pada gambar. Cara yang biasa dilakukan adalah memberikan perataan kiri kanan pada gambar yaitu margin. Tetapi jika kita melakukan pengaturan margin secara manual maka hasilnya tidak efektif atau hanya efektif pada tampilan yang anda lihat saat itu. Hal ini karena setiap website dapat dilihat dari berbagai macam ukuran layar seperti layar laptop, tablet, atau ponsel. Jika anda pada saat itu mengatur margin pada tampilan layar laptop maka bisa dipastikan gambar itu hanya akan terlihat center (rata tengah) pada tampilan laptop sedangkan pada tampilan tablet atau ponsel gambar itu mungkin akan terlihat sedikit atau bahkan terlalu ke kiri atau kanan (tidak rata tengah).

Nah, untuk mengatasi permasalahan margin pada gambar, berikut ini saya berikan tips sederhana bagi anda mengenai cara membuat gambar yang kita letakkan pada widget rata tengah pada semua tampilan layar perangkat elektronik yang anda gunakan.

Cara 1 - Inline CSS

Cara pertama ini cukup mudah, anda cukup menambahkan display:block dan margin:auto pada style gambar anda seperti contoh berikut.

                                  <img src="gambar.jpg" style="display:block;margin:auto"/>

Cara 2 

Cara kedua ini cara penggunaan kode css pada umumnya yaitu dipisah dari tag img tapi kode script yang perlu ditambahkan sama saja dengan yang di atas seperti berikut.

                                   <style> #img{ display:block; margin:auto; } </style> <img src="gambar.jpg"/>

Perlu diperhatikan bahwa penambahan kode script melalui Layout pada gadget HTML/JavaScript tidak perlu memisahkan antara bagian head dan body jadi tidak perlu dipisah satu-satu. Banyak orang sering salah untuk memberikan perataan tengah pada gambar yaitu menggunakan text-align:center dimana penggunaan kode script ini hanya diberikan untuk membuat perataan tengah pada teks bukan pada gambar. Demikian tutorial kali ini. Semoga artikel ini dapat membantu anda. Terima kasih telah membaca!

loading...