Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya

CSS Align, Mengatur Alignment elemen HTML

Mengatur Alignment elemen HTML - Dalam CSS, ada beberapa properti yang bisa digunakan untuk mengatur alignment (rata kanan, kiri, dan tengah) suatu elemen HTML secara horizontal. Yaitu margin, position, dan float. Selengkapnya simak ulasannya satu per satu berikut ini.

3 Cara untuk Mengatur Posisi Alignment elemen HTML


1. Center Align (Rata Tengah) – Menggunakan Margin


Mengatur lebar suatu elemen bisa mencegahnya dari meregang ke luar jalur tepi container (wadah). Gunakan margin: auto agar elemen menjadi rata tengah dan tetap berada di dalam wadah.
Dengan menggunakan margin:auto, elemen akan mengambil lebar yang sudah ditentukan, sedangkan ruang yang tersisa akan dibagi sama antara kedua margin. Jadi akan terlihat rapi.

Contoh penggunaannya seperti ini :


<!DOCTYPE html>
<html>
<head>
<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid red;
    padding: 10px;
}
</style>
</head>
<body>

<div class="center">
  <p><b>Ket: </b>Ini contoh elemen dengan alignment rata tengah menggunakan margin:auto.</p>
</div>

</body>
</html>

Maka hasilnya :

mengatur alignment elemen html

Sebagai tambahan, center align menggunakan margin:auto ini tidak akan berfungsi jika pada properti width tidak ditentukan ukurannya, atau ditentukan tapi dengan ukuran 100%.

2. Left dan Right Align (Rata Kiri dan Kanan) – Menggunakan Position


Selanjutnya adalah menentukan alignment suatu elemen HTML dengan menggunakan properti Position, yaitu position:absolute. Sebagai contoh, di bawah ini adalah contoh penggunaan position:absolute untuk membuat rata kanan suatu elemen.


<!DOCTYPE html>
<html>
<head>
<style>
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid red;
    padding: 10px;
}
</style>
</head>
<body>

<div class="right">
  <p>Kalo yang ini adalah contoh menentukan alignment suatu elemen menggunakan position:absolute</p>
</div>

</body>
</html>

Hasilnya :

mengatur alignment elemen html

3. Left dan Right Align (Rata Kiri dan Kanan) – Menggunakan Float


Hampir sama dengan penggunaan properti position:absolute untuk menentukan alignment rata kanan atau kiri suatu elemen HTML, hanya yang ini dengan menggunakan properti float diikuti dengan mendefinisikan posisi alignment yang diinginkan, kanan atau kiri.

Di bawah ini adalah contoh penggunaan properti float untuk membuat suatu elemen HTML menjadi rata kiri. Sehingga yang digunakan adalah float:left.


<!DOCTYPE html>
<html>
<head>
<style>
.right {
    float: left;
    width: 300px;
    border: 3px solid red;
    padding: 10px;
}
</style>
</head>
<body>

<div class="right">
  <p>Kalo yang ini adalah contoh menentukan alignment suatu elemen menggunakan float.</p>
</div>

</body>
</html>

Hasilnya :

mengatur alignment elemen html
Itulah tiga properti CSS yang bisa digunakan untuk menentukan alignment suatu elemen HTML, baik rata kanan, rata kiri, ataupun rata tengah. Sedangkan alignment untuk teks bisa kamu simak di Mengenal CSS Text dan Penggunaannya.



1 Komentar untuk "CSS Align, Mengatur Alignment elemen HTML"

Back To Top