Belajar CSS Part 21 - Align (Penyelarasan)

CSS Layout - Horizontal & Vertikal Align

Align adalah penyelarasan, perataan, atau jajaran baik berupa teks, elemen, dan lain-lain.

Gambar di bawah merupakan contoh penyelarasan elemen yang disetel ke align center (penyelarasan ke tengah).

Penyelarasan Elemen ke Tengah

Untuk memusatkan elemen blok (seperti <div>) secara horizontal, gunakan margin: auto;. Setel lebar elemen sehingga akan menceganya untuk meregang ke tepi / sisi dari wadah elemen tersebut.

Elemen tersebut kemudian akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi rata antara dua margin (margin kiri dan kanan).

Contoh

.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Penyelarasan Elemen ke Tengah</h2>
<p>Untuk  memusatkan elemen blok (seperti <div>) secara horizontal, gunakan margin: auto;</p>

<div class="center">
  <p><b>Catatan: </b>menggunakan margin:auto tidak working di IE8, kecuali kalau sebuah !DOCTYPE dideklarasikan.</p>
</div>

</body>
</html>

Hasilnya:

Catatan: Penyelaraskan ke tengah tidak berpengaruh jika properti width tidak diatur (atau set ke 100%).

Penyelarasan Teks ke Tengah

Untuk memusatkan teks ke tengah dalam sebuah elemen, gunakan text-align: center;.

Contoh

.center {
    text-align: center;
    border: 3px solid green;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Teks di Tengah</h2>

<div class="center">
  <p>Teks ini di selaraskan ke tengah</p>
</div>

</body>
</html>

Hasilnya:

Tip: Untuk contoh lebih lanjut tentang cara untuk menyelaraskan teks, lihat CSS Text pada tutorial CSS sebelumnya.

Penyelarasan Gambar ke Tengah

Untuk menempatkan gambar di tengah, atur margin kiri dan kanan ke auto dan buat menjadi elemen blok.

Contoh

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Sebuah gambar di Tengah</h2>
<p>Untuk menempatkan gambar di tengah, atur margin kiri dan kanan ke auto dan buat menjadi elemen blok.</p>

<img src="paris.jpg" alt="Paris" style="width:40%">

</body>
</html>

Hasilnya:

Penyelarasan Kiri dan Kanan - Menggunakan "position"

Salah satu metode untuk menyelaraskan elemen adalah dengan menggunakan position: absolute;.

Contoh

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Penyelarasan Kanan</h2>
<p> Contoh cara menyelaraskan elemen dengan properti position: </ p>

<div class="right">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>

</body>
</html>

Hasilnya:

Catatan: Elemen yang diposisikan secara absolute dihapus dari aliran normal, dan dapat tumpang tindih dengan elemen lain.

Penyelarasan Kiri dan Kanan - Menggunakan "float"

Metode lain untuk menyelaraskan elemen adalah dengan menggunakan properti float.

Contoh

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Penyelarasan Kanan</h2>
<p> Contoh cara menyelaraskan elemen dengan properti float: </ p>

<div class="right">
  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>

</body>
</html>

Hasilnya:

Catatan: Jika sebuah elemen lebih tinggi dari elemen yang induknya, dan elemen tersebut mengambang (float), maka akan "meluap" di luar wadahnya. Kita dapat menggunakan "clearfix" hack untuk memperbaiki ini. Lihat contoh clearfix hack berikut!

Clearfix Hack

Kita dapat menambahkan overflow: auto; ke elemen induknya untuk memperbaiki masalah ini.

Contoh

div {
    border: 3px solid #4CAF50;
    padding: 5px;
}

.img1 {
    float: right;
}

.clearfix {
    overflow: auto;
}

.img2 {
    float: right;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Dalam contoh ini, gambar lebih tinggi daripada elemen induknya, dan itu mengambang, sehingga meluap di luar wadahnya:</p>

<div>
<img class="img1" src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

<p style="clear:right">Tambahkan class clearfix dengan overflow: auto; ke elemen induknya untuk memperbaiki masalah ini:</p>

<div class="clearfix">
<img class="img2" src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

</body>
</html>

Hasilnya:

Penyelarasan Secara Vertikal - Menggunakan "padding"

Ada banyak cara untuk menyelaraskan elemen secara vertikal dalam CSS. Sebuah solusi sederhana adalah dengan menggunakan padding top (atas) dan padding buttom (bawah).

Contoh

.center {
    padding: 70px 0;
    border: 3px solid green;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2> Penyelarasan ke Tengah Secara Vertikal </ h2>
<p> Dalam contoh ini, menggunakan properti padding untuk memusatkan elemen div secara vertikal: </ p>

<div class="center">
  <p>Teks ini di selaraskan ke tengah secara vertikal...</p>
</div>

</body>
</html>

Hasilnya:

Untuk menyelaraskan secara vertikal dan horizontal, gunakan padding dan text-align: center;:

Contoh

.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Diselaraskan ke Tengah</h2>
<p>Dalam contoh ini, menggunakan padding dan text-align untuk memusatkan elemen div secara vertikal dan horizontal:</p>

<div class="center">
  <p>Teks ini diselaraskan ke tengah secara vertikal dan horizontal...</p>
</div>

</body>
</html>

Hasilnya:

Penyelarasan Secara Vertikal - Menggunakan "line-height"

Trik lain adalah dengan menggunakan properti line-height dengan nilai yang sama dengan properti height.

Contoh

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Diselaraskan ke Tengah</h2>
<p>Dalam contoh ini, menggunakan properti line-height dengan value yang sama dengan properti height untuk memusatkan elemen div:</p>

<div class="center">
  <p>Teks ini diselaraskan ke tengah secara vertikal dan horizontal...</p>
</div>

</body>
</html>

Hasilnya:

Penyelarasan Secara Vertikal - Menggunakan "position" & "transform"

Jika padding dan line-height tidak menjadi pilihan, solusi ketiga adalah dengan menggunakan properti position dan transform.

Contoh

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Diselaraskan ke Tengah</h2>
<p>Dalam contoh ini, menggunakan properti positioning dan transform untuk memusatkan elemen div secara vertikal dan horizontal: </ p>

<div class="center">
  <p>Teks ini diselaraskan ke tengah secara vertikal dan horizontal...</p>
</div>

<p>Catatan: Properti transform tidak didukung di IE8 dan versi sebelumnya.</p>

</body>
</html>

Hasilnya: