CARA MENGATUR POSISI GAMBAR DI HTML

HTML memungkinkan kamu untuk menampilkan gambar di laman web dan juga memberikan berbagai opsional untuk mengatur posisinya. Mengetahui cara mengatur posisi gambar adalah keterampilan penting yang perlu dipelajari oleh setiap pengembang web. Artikel ini akan membantu kamu mempelajari cara melakukannya dengan langkah-langkah yang mudah dan jelas.

Menggunakan Tag <img>

Secara default, gambar yang dimasukkan ke dalam halaman web akan ditata rata kiri. Jika kamu ingin mengubahnya, pertama kamu harus memahami cara kerja tag <img>.

Untuk menampilkan gambar, kita menggunakan tag <img> dengan atribut src yang berisi URL atau path dari gambar tersebut. Misalnya seperti ini:

<img src="url_gambar">

Jika kamu ingin menambahkan atribut lain seperti alt yang berfungsi sebagai teks alternatif ketika gambar tidak dapat ditampilkan, bisa ditambahkan seperti ini :

<img src="url_gambar" alt="deskripsi_gambar">

Mengatur Posisi Gambar

Setelah memahami tag <img>, langkah selanjutnya adalah menggunakan CSS untuk mengatur posisi gambar. Berikut ini adalah beberapa cara yang bisa kamu lakukan:

Menggunakan Properti text-align

Cara termudah untuk mengatur posisi gambar adalah dengan menggunakan properti text-align pada elemen parent atau kontainer dari gambar tersebut. Misalkan kamu ingin membuat gambar berada di tengah, kamu bisa melakukannya seperti ini:

<div style="text-align:center">
  <img src="url_gambar" alt="deskripsi_gambar">
</div>

Dalam contoh di atas, gambar akan diletakkan di tengah elemen div.

Menggunakan Properti margin

Cara lain yang bisa kamu lakukan adalah dengan menggunakan properti margin. Kamu bisa mengatur margin kiri dan kanan menjadi auto dan memastikan elemen gambar memiliki properti display diatur sebagai block. Berikut adalah contoh cara melakukannya:

<img src="url_gambar" alt="deskripsi_gambar" style="display:block; margin-left: auto; margin-right: auto;">

Mengatur posisi gambar mungkin tampak mudah, tetapi ada berbagai opsi dan tweak yang dapat kamu lakukan untuk mendapatkan hasil yang kamu inginkan. Jadi, tetaplah berexperiment dan belajar lebih banyak tentang CSS dan HTML!