Cara Mengatur Posisi Gambar Dengan CSS

Zona Internetku 1 Comment December 04, 2018

Cara Mengatur Posisi Gambar Dengan CSS. Pada umumnya tata letak atau penempatan posisi gambar yang paling sering dipakai pada sebuah website biasanya berada di bagian kiri, kanan dan tengah. Dan untuk mengatur posisi tersebut kita harus memahami bahasa pemrograman web untuk memudahkan kita dalam mengatur tata letak web termasuk mengatur gambar. Dan untuk mengatur tata letak gambar kita dapat menggunakan kode CSS pada web kita

Baca juga :
Cara Mengatur Format Text Dengan CSS
Memahami Atribut Class Dan Id Pada HTML
Mengatur Posisi Paragraf Dengan HTML Dan CSS

Cara Untuk Mengatur Posisi Gambar Dan Text Dengan Menggunakan Kode CSS

1. Mengatur Gambar Di Posisi Kiri
Silahkan kalian sisipkan sebuah gambar pada web kalian
kemudian kalian beri atribut class beserta value-nya pada tag img tersebut dan beri kode css seperti berikut ini

<html>
<head>
<title>Menyisipkan Gambar</title>
<style>
.kiri{float:left;display:block;width:200px}
</style>
</head>
<body>
<img class="kiri" src="Penguins.jpg"/>
</body>
</html>

2. Mengatur Gambar Di Posisi Kanan
Untuk mengatur posisi gambar supaya berada di sebelah kanan maka kita juga bisa menggunakan kode tag css yang sama yaitu menggunakan properti float tapi dengan value yang berbeda yaitu mengisinya dengan value right seperti ini

<html>
<head>
<title>Menyisipkan Gambar</title>
<style>
.kiri{float:left;display:block;width:200px}
.kanan{float:right;display:block;width:200px}
</style>
</head>
<body>
<img class="kiri" src="Penguins.jpg"/>
<img class="kanan" src="Penguins.jpg"/>
</body>
</html>

3. Mengatur Gambar Di Posisi Tengah
Berbeda dengan dengan cara sebelumnya, cara ini agak berbeda karena kita tidak dapat mengatur posisi gambar berada di tengah menggunakan properti float, karena float hanya memiliki value left, right, dan none. Maka dari itu kita perlu sedikit cerdik dan kita bisa menggunakan properti margin seperti berikut

<html>
<head>
<title>Menyisipkan Gambar</title>
<style>
.kiri{float:left;display:block;width:200px}
.kanan{float:right;display:block;width:200px}
.tengah{margin-left:auto;margin-right:auto;display:block;width:200px}
</style>
</head>
<body>
<img class="kiri" src="Penguins.jpg"/>
<img class="kanan" src="Penguins.jpg"/>
<img class="tengah" src="Penguins.jpg"/>
</body>
</html>

Mengatur Posisi Gambar Dan Teks

Setelah kalian mengatur posisi gambar dengan properti css yang bernama float maka teks yang ada didalamnya juga akan menerima efeknya, maka dari kita dapat menggunakan properti clear untuk memberikan perintah bahwa tag tersebut berada di baris baru dan berikan properti margin untuk mengatur jarak antara gambar dengan teks

<html>
<head>
<title>Menyisipkan Gambar</title>
<style>
.kiri{float:left;display:block;width:200px;margin:5px}
.kanan{float:right;display:block;width:200px;clear:both;margin:5px}
.tengah{margin-left:auto;margin-right:auto;display:block;width:200px;clear:both}
p.teks1{float:left}
p.teks2{float:right}
p.teks3{display:block;text-align:center;}
</style>

</head>
<body>
<img class="kiri" src="Penguins.jpg"/>
<p class ="teks1">Mengatur Gambar Di Posisi Kiri</p>
<img class="kanan" src="Penguins.jpg"/>
<p class ="teks2">Mengatur Gambar Di Posisi Kanan</p>
<img class="tengah" src="Penguins.jpg"/>
<p class ="teks3">Mengatur Gambar Di Posisi Tengah</p>
</body>
</html>

Itulah penjelasan singkat dan sederhana dari saya mengenai Tutorial Mengubah Posisi Gambar Di Web Menggunakan CSS.

Baca juga :
Mengatur Heading Dan Format Text Web Menggunakan HTML
Belajar Cara Menggunakan Dasar Css Untuk Web Desain
Tutorial Membuat Tabel Di Web Dengan HTML

Promo Menarik