Section Artikel
- 1 Elemen Center Align
- 2 Teks Center Align
- 3 Gambar Center
- 4 Left dan Right Align – Menggunakan position
- 5 Left dan Right Align – Menggunakan float
- 6 The clearfix Hack
- 7 Center Vertically – Menggunakan padding
- 8 Center Vertically – Menggunakan line-height
- 9 Center Vertically – Menggunakan position dan transform
- 10 Center Vertically – Menggunakan Flexbox
Elemen Center Align
Untuk memusatkan (centered) elemen block secara horizontal (seperti <div> ) gunakan margin: auto.
Dengan mengatur lebar sebuah elemen akan mencegah elemen tersebut meregang hingga ke tepi conatiner.
Elemen tersebut kemudian akan 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 Center Align</h2> <p>Untuk memusatkan elemen block secara horizontal (seperti <div> ) gunakan margin: auto.</p> <div class="center"> <p><b>Catatan: </b>Menggunakan margin: auto tidak akan berfungsi di IE8, kecuali a! DOCTYPE dideklarasikan.</p> </div> </body> </html>
Catatan: Center Align tidak berpengaruh jika properti width tidak diatur atau diatur menjadi 100%.
Teks Center Align
Jika ingin memusatkan (centered) teks di dalam elemen, maka gunakan text-align: center;
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Teks Center</h2>
<div class="center">
<p>Teks ini centered.</p>
</div>
</body>
</html>
Tip: Untuk contoh lainnya tentang bagaimana meratakan teks, lihat penjelasan pada bab Teks di CSS.
Gambar Center
Untuk memusatkan (centered) gambar, setel margin kiri dan kanan ke otomatis dan jadikan elemen block.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Gambar Centerd</h2>
<p>Untuk memusatkan (centered) gambar, setel margin kiri dan kanan ke otomatis dan jadikan elemen block.</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQrZq8Q5dsxZpg2Thlm_rocTmXTy34FYDlgQw&usqp=CAU" alt="Banyuwangi" style="width:40%">
</body>
</html>
Left dan Right Align – Menggunakan position
Salah satu metode untuk meratakan sebuah elemen 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>Right Align</h2>
<p>Contoh cara meratakan elemen ke kanan dengan properti position: </p>
<div class="right">
<p>Di tahun-tahun saya muda dan rentan, ayah saya memberi saya beberapa nasihat yang terus saya pikirkan sejak saat itu.</p>
</div>
</body>
</html>
Catatan: Elemen yang diposisikan absolute dihapus dari flow normal, dan dapat tumpang tindih dengan elemen.
Left dan Right Align – Menggunakan float
Metode lain yang juga digunakan untuk meratakan elemen adalah dengan menggunakan properti float:
<!DOCTYPE html>
<html>
<head>
<style>
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Right Align</h2>
<p>Contoh cara meratakan elemen ke kanan dengan properti float:</p>
<div class="right">
<p>Di tahun-tahun saya muda dan rentan, ayah saya memberi saya beberapa nasihat yang terus saya pikirkan sejak saat itu.</p>
</div>
</body>
</html>
Catatan: Jika sebuah elemen memiliki tinggi lebih dari elemen yang memuatnya dan juga diapungkan, elemen tersebut akan meluap keluar dari penampungnya. Anda dapat menggunakan hack “clearfix” untuk memperbaikinya (lihat contoh selanjutnya).
The clearfix Hack
Untuk memperbaiki masalah diatas kita bisa menambahkan overflow: auto; pada elemen <div>.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.clearfix {
overflow: auto;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<p>In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:</p>
<div>
<img class="img1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQrZq8Q5dsxZpg2Thlm_rocTmXTy34FYDlgQw&usqp=CAU" alt="Banyuwangi" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
<p style="clear:right">Tambahkan kelas clearfix dengan overflow: auto; ke elemen untuk memperbaiki masalah ini:</p>
<div class="clearfix">
<img class="img2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQrZq8Q5dsxZpg2Thlm_rocTmXTy34FYDlgQw&usqp=CAU" alt="Banyuwangi" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
</body>
</html>
Center Vertically – Menggunakan padding
Ada banyak cara untuk memusatkan (centered) elemen secara vertikal pada CSS. Solusi sederhana 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>Center Vertically</h2>
<p>Dalam contoh ini menggunakan propert padding untuk memusatkan elemen div secara vertikal:</p>
<div class="center">
<p>Aku vertically centered.</p>
</div>
</body>
</html>
Untuk menengahkan (centered) baik secara vertikal maupun 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>Centering</h2>
<p>Dalam contoh ini, kami menggunakan padding dan text-align untuk memusatkan elemen div secara vertikal dan horizontal:</p>
<div class="center">
<p>Aku vertical dan horisontal centered.</p>
</div>
</body>
</html>
Center Vertically – Menggunakan line-height
Trik lain 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>Centering</h2>
<p>Dalam contoh ini, kami menggunakan properti line-height dengan nilai yang sama dengan properti height untuk memusatkan elemen div:</p>
<div class="center">
<p>Aku vertikal dan horisontal centered.</p>
</div>
</body>
</html>
Center Vertically – Menggunakan position dan transform
Jika padding dan line-height bukan merupakan 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>Centering</h2>
<p>Dalam contoh ini, kami menggunakan properti position dan properti transform untuk memusatkan elemen div secara vertikal dan horizontal:</p>
<div class="center">
<p>Aku vertikal dan horisontal centered.</p>
</div>
</body>
</html>
Center Vertically – Menggunakan Flexbox
Anda juga dapat menggunakan flexbox untuk memusatkan teks maupun gambar. Caatatan bahwa flexbox tidak didukung di IE10 dan versi sebelumnya.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
</style>
</head>
<body>
<h1>Flexbox Centering</h1>
<p>Sebuah wadah dengan properti justify-content dan align-items yang disetel ke <em> center </em> akan meratakan item di tengah (kedua sumbu).</p>
<div class="center">
<p>Aku vertikal dan horisontal centered.</p>
</div>
</body>
</html>
Tip: Anda akan mempelajari lebih lanjut tentang Flexbox di Bab CSS Flexbox.
