Cara Memindahkan Teks Di Sekitar Gambar Dengan HTML atau CSS

Saat Anda menyertakan gambar dengan teks di halaman Web Anda, gaya default menampilkan grafik di atas atau di bawah konten di sekitarnya, meninggalkan ruang putih di kiri dan kanan gambar. Ini membuang-buang ruang dan membuat gambar tampak terputus-putus dari teks Anda. Untuk memperbaikinya, Anda memiliki opsi untuk menggunakan HyperText Markup Language (HTML) atau Cascading Style Sheets (CSS) untuk menentukan posisi gambar sehingga teks membungkus batas gambar. Gunakan HTML atau CSS untuk memindahkan teks di sekitar gambar Anda, seperti yang Anda inginkan.

HTML

Langkah 1

Luncurkan file halaman di program editor teks komputer Anda dan posisikan kursor Anda di dalam "" tag. Ketik "align=" dan ikuti ini dengan tanda kutip seperti:

Langkah 2

Masukkan "kanan," "kiri," "tengah," "atas" atau "bawah" setelah entri perataan untuk menentukan di mana gambar Anda muncul dalam kaitannya dengan teks Anda. Perataan "atas" membuat konten Anda muncul di titik tertinggi gambar Anda, "tengah" memindahkan teks ke tengah foto dan "bawah" mengarahkan konten untuk memulai di bagian bawah grafik. Selain itu, posisi "kanan", memindahkan data Anda ke kiri gambar dan perataan "kiri" menempatkan konten di sebelah kanan gambar. Ketik kode Anda sebagai berikut:

Simpan file.

CSS

Langkah 1

Tempatkan kursor Anda di dalam "" tag dan ketik "style=" dengan sekumpulan tanda kutip sebelum kurung sudut terakhir. Sebagai ilustrasi:

Langkah 2

Masukkan "float:" di dalam tanda kutip dan ketik atribut "kiri" atau "kanan" untuk memberi nama perataan grafik. Nilai "kiri" membuat gambar Anda muncul di sebelah kiri dan memindahkan teks Anda ke kanan, sedangkan atribut "kanan" melakukan sebaliknya. Sebagai contoh:

Simpan dokumen Anda.