Cara Mengatur Posisi Teks di Sekitar Gambar dengan HTML atau CSS

Ketika Anda menampilkan gambar di halaman web bersama teks, tampilan default biasanya menempatkan gambar di atas atau di bawah konten, meninggalkan ruang kosong di kiri dan kanan. Hal ini membuat gambar terasa terpisah dari teks. Solusinya adalah dengan menata posisi gambar menggunakan HTML atau CSS sehingga teks mengalir mengelilingi tepi gambar.

Menggunakan HTML

Langkah 1

Buka file halaman Anda di editor teks dan letakkan kursor di dalam tag <img>. Tambahkan atribut align="…" di dalam tag tersebut.

Langkah 2

Isi nilai atribut align dengan salah satu dari: left, right, top, bottom atau middle untuk menentukan posisi gambar relatif terhadap teks. Contoh: <img src="foto.jpg" align="left"> menempatkan gambar di sisi kiri dan teks mengalir di sebelah kanan.

Catatan: Atribut align sudah tidak disarankan dalam HTML5, namun masih berfungsi di banyak browser.

Menggunakan CSS

Langkah 1

Letakkan kursor di dalam tag <img> dan tambahkan atribut style="…".

Langkah 2

Di dalam tanda kutip, tulis float:left atau float:right untuk menempatkan gambar di kiri atau kanan. Misalnya: <img src="foto.jpg" style="float:left; margin:0 10px 10px 0;"> akan memposisikan gambar di kiri dan memberi jarak margin.

Setelah menambahkan kode, simpan file Anda. Dengan float, teks akan mengalir di sekitar gambar sesuai arah yang ditentukan.