Pada tutorial CSS sebelumnya, kita sudah mempelajari bagaimana mengatur tata letak gambar dengan CSS. Diantaranya ialah mengatur letak gambar ke sisi kiri, tengah, ke sisi kanan dan membuat sebuah gambar menjadi responsive.
Jika diperhatikan lebih jauh, posisi gambar tersebut hanya di atur letaknya secara horizontal. Pertanyaannya, bisakah kita mengatur posisi atau letak gambar secara vertikal ? Jawabannya tentu bisa. Mari simak tutorial berikut untuk belajar mengatur tata letak gambar secara vertikal menggunakan CSS.
Mengatur Letak Gambar Posisi Middle
Untuk mengatur letak gambar secara vertical, Anda dapat menggunakan perintah CSS vertical-align. Perintah ini berfungsi untuk dapat mengatur posisi elemen HTML (termasuk gambar) secara vertikal.
Untuk mengatur letak gambar ke tengah, Anda dapat menggunakan value middle. Contoh perintah :
img {
vertical-align: middle;
}
Perintah diatas akan menampilkan hasil seperti gambar dibawah ini :
Mengatur Letak Gambar Posisi Top
Dengan value top, Anda dapat mengarahkan letak gambar ke posisi atas. Contoh perintah :
img {
vertical-align: top;
}
Perintah diatas akan menampilkan hasil seperti dibawah ini :
Mengatur Letak Gambar Posisi Bottom
Dengan value bottom, Anda dapat mengarahkan letak gambar ke posisi bawah. Contoh perintah :
img {
vertical-align: bottom;
}
Perintah diatas akan menampilkan hasil seperti dibawah ini :
Kesimpulan
Nah, cukup mudah bukan ! Sekarang Anda dapat mengatur letak gambar sesuai dengan kebutuhan tanpa kesulitan harus menggunakan perintah CSS apa. Semoga bermanfaat.
Jangan lupa untuk membaca tutorial lainnya yah.
