Tag div pada markup HTML sangat penting nilainya, tag ini sering kali digunakan untuk mendefinisikan sebuah bagian dalam dokumen HTML. Dan biasanya tag div juga digunakan sebagai penghubung bagian dengan CSS3 dengan menambahkan style, class, atau id sebagai penanda bagian div.
Karena itu div akan muncul jika kita telah mengatur CSS-nya terlebih dahulu. Artikel kali ini juga bisa diartikan mengatur posisi div dengan CSS.
Mengatur posisi tag HTML div.
Karena sering digunakan sebagai bagian dari tata letak website, kita harus tahu bagaimana menempatkan div element div agar ditengah, kiri, atau kanan sebuah halaman website.
Tujuannya adalah saat kita ingin menulis sebuah kode HTML, kita tahu bagiamana menempatkan dan mengatur posisi yang sesuai pada tag div.
Sebelum memulai, kalian copy dan pastekan source kode HTML berikut, source kode berikut ini yang akan menjadi dasarnya untuk mengetahui posisi tag div yang akan diubah dengan CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tag Div Posisi Tengah</title>
<style>
<!-- ISIKAN DENGAN STYLE CSS DIV KIRI, TENGAH, ATAU KANAN -->
</style>
</head>
<body>
<div class="kiri">POSISI DIV KIRI</div>
<div class="tengah">POSISI DIV TENGAH</div>
<div class="kanan">POSISI DIV KANAN</div>
</body>
</html>
Berikut ini ulasannya.
1. Atur posisi div dikiri.
Yang pertama adalah posisi default dari tag HTML div. Posisi default dari div ini akan berada dikiri sesuai standar dari broswer yang digunakan.
Contohnya seperti source CSS kode div posisi kiri dibawah ini.
.kiri{
background-color:yellow;
width:200px;
height:200px;
display: block;
}
Penjelasan:
Kita fokuskan pada tag CSS3 display:block;, diatas kita tidak menambahkan margin atau padding, secara default akan menghasilkan div berada diposisi kiri dengan nilai pada browser display:block;.
Baca : Teks pelangi only CSS3.
2. Atur posisi div berada ditengah.
Untuk mengatur posisi tag HTML div berada ditengah, kalian bisa menggunakan CSS margin:0 auto;. Berikut ini kode CSS yang bisa digunakan untuk div posisi tengah.
.tengah{
margin: auto;
background-color:red;
width:200px;
height:200px;
}
Penjelasan:
Disini posisi div akan berada ditengah karena CSS dari margin:0auto;.
Baca : Membuat tombol animasi only CSS3.
3. Posisi div dikanan
Mengatur posisi div agar di kanan sebuah website bisa dilakukan dengan menggunakan CSS float:right;. Berikut ini cssnya.
.kanan{
background: blue;
float: right;
width: 200px;
height: 200px;
}
Penjelasan :
Pemberian CSS float memungkinkan posisi div akan berada dikanan atau kiri tergantung nilai yang digunakan pada float, sedangkan diatas kita menggunakan nilai right sehingga posisi div tepat berada dikanan.
Baca : Menu bootstrap responsif dengan nilai hover.
Ketiga cara diatas memang sederhana untuk membuat tag HTML div posisi dikiri, kanan atau tengah website.
Sekian dari saya, terima kasih telah berkunjung.