Elemen Rata Tengah
Untuk memusatkan elemen blok secara horizontal (seperti <div>), gunakan margin: auto;. Kemudian atur lebar elemen akan mencegahnya melebar keluar tepi elemen penampungnya. Elemen kemudian akan hanya mengambil lebar yang ditentukan dan ruang yang tersisa akan dibagi rata antara dua margin:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Elemen Rata Tengah</h2>
<p>Untuk memusatkan elemen blok secara horizontal (seperti div), gunakan margin: auto.</p>
<div class="center">
<p>Halo Dunia!</p>
</div>
</body></html>Catatan: Perataan tengah tidak berpengaruh jika properti width tidak diatur (atau diatur ke 100%).
Tulisan Rata Tengah
Untuk mengatur tulisan menjadi rata tengah, gunakan text-align: center;
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Teks Rata Tengah</h2>
<div class="center">
<p>Teks ini berada di tengah.</p>
</div>
</body></html>Memusatkan Gambar
Untuk membuat gambar berada tepat di tengah (terpusatkan), atur margin kiri dan kanan ke nilai auto dan isi properti display elemen menjadi block:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Memusatkan Gambar</h2>
<p>Untuk memusatkan gambar, gunakan margin-left: auto dan margin-right: auto.</p>
<img src="paris.jpeg" alt="Paris" style="width:40%">
</body></html>Perataan Kiri dan Kanan – Menggunakan position
Satu metode lain untuk meratakan elemen pada bagian kiri dan kanan, adalah dengan menggunakan position: absolute;:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Posisi sejajar kanan dengan properti position</h2>
<p>Contoh cara membuat elemen jadi sejajar dengan properti position.</p>
<div class="right">
<p>Di tahun-tahun saya yang lebih muda dan lebih rentan, ayah saya memberi saya beberapa nasihat yang selalu saya ingat sejak saat itu.</p>
</div>
</body></html>Perataan Kiri dan Kanan – Menggunakan float
Metode lain untuk meratakan elemen adalah dengan menggunakan properti float:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Posisi sejajar kanan dengan properti float</h2>
<p>Contoh cara membuat elemen jadi sejajar dengan properti float.</p>
<div class="right">
<p>Di tahun-tahun saya yang lebih muda dan lebih rentan, ayah saya memberi saya beberapa nasihat yang selalu saya ingat sejak saat itu.</p>
</div>
</body></html>clearfix Hack
Kemudian gunakan clearfix hack ke elemen penampung:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Tanpa clearfix</h2>
<div>
<img class="img1" src="pineapple.jpeg" alt="Nanas" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Phasellus imperdiet...
</div>
<h2 style="clear:right">Dengan clearfix hack</h2>
<p>Tambahkan clearfix hack ke elemen wadah</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpeg" alt="Nanas" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Phasellus imperdiet...
</div>
</body></html>Memusatkan Secara Vertikal – Menggunakan padding
Ada banyak cara untuk memusatkan elemen secara vertikal di CSS. Solusi sederhananya adalah dengan menggunakan padding atas dan bawah:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Memusatkan elemen secara vertikal dengan padding</h2>
<p>Dalam contoh ini, gunakan properti padding untuk memusatkan elemen div secara vertikal.</p>
<div class="center">
<p>Saya berada di tengah vertikal.</p>
</div>
</body></html>Untuk memusatkan secara vertikal dan horizontal, gunakan padding dan text-align: center:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<h2>Memusatkan elemen secara vertikal dan horizontal</h2>
<p>Dalam contoh ini, gunakan padding dan text-align untuk memusatkan elemen div secara vertikal dan horizontal.</p>
<div class="center">
<p>Saya terpusat secara vertikal dan horizontal.</p>
</div>
</body></html>Memusatkan Secara Vertikal – Menggunakan line-height
Trik lainnya adalah dengan menggunakan properti line-height dengan nilai yang sama dengan properti height :
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>
<h2>Memusatkan elemen dengan properti line-height</h2>
<p>Dalam contoh ini, gunakan properti line-height dengan nilai yang sama dengan properti height untuk memusatkan elemen div.</p>
<div class="center">
<p>Saya terpusat secara vertikal dan horizontal.</p>
</div>
</body></html>Memusatkan Secara Vertikal – Menggunakan position & transform
Jika padding dan line-height bukan opsi, solusi lain adalah menggunakan properti position dan properti transform:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.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%);
}
</style>
</head>
<body>
<h2>Memusatkan elemen dengan properti position dan transform</h2>
<p>Dalam contoh ini, gunakan properti position dan transform untuk memusatkan elemen div secara vertikal dan horizontal.</p>
<div class="center">
<p>Saya terpusat secara vertikal dan horizontal.</p>
</div>
</body></html>Memusatkan Secara Vertikal – Menggunakan Flexbox
Selain itu juga dapat menggunakan flexbox untuk memusatkan elemen. Perhatikan bahwa flexbox tidak didukung di IE10 dan versi sebelumnya:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Memusatkan elemen dengan Flexbox</h2>
<div class="center">
<p>Saya terpusat secara vertikal dan horizontal.</p>
</div>
</body></html>Tutorial sebelumnya : Tampilan Inline-Block CSS
Tutorial setelahnya : CSS Combinators
Semua Tutorial CSS : Tutorial CSS