Mungkin ada yang baru belajar HTML dan CSS tetapi mengalami kesulitan untuk membuat sebuah content berada di tengah-tengah secara horizontal ataupun vertikal. Ada beberapa cara untuk membuat sebuah element berada di posisi tengah. Jika kamu menggunakan tag berupa <p> tentu tidak sulit. Kamu cukup menambahkan CSS yaitu text-align:center agar element tersebut berada di posisi tengah.
Daftar Isi
Permasalahan Yang Dialami
Tetapi yang sering menjadi permasalahan banyak teman-teman yang baru mulai belajar pemrograman HTML & CSS adalah membuat design dengan content berada di tengah-tengah. Misalkan hal yang simple kadang kita ingin membuat posisi text berada di tengah tetapi ketika menambah text-align:center tidak ada perubahan apa-apa. Biasanya ini karena parent div memiliki widht:100% dan content di dalamnya memiliki width yang statis misalkan 100px. Jika situasi seperti ini kamu cukup menambahkan margin: 0 auto pada div content agar div content berada di tengah-tengah.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.parent{
width: 100%;
}
.content{
width:100px;
text-align: center;
background-color: yellow;
margin:0 auto;
}
</style>
<body>
<div class="parent">
<div class="content">Hay Semua</div>
</div>
</body>
</html>Selain problem di atas yang hanya menempatkan posisi di tengah secara horizontal, mungkin kamu akan sering menemukan problem-problem lain seperti design di bawah ini.
Mungkin untuk yang belum terbiasa bisa menghabiskan waktu hanya untuk membuat element tersebut berada di tengah-tengah. Disini saya coba memberikan tipsnya untuk gambar pertama seperti di bawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.yellow-box{
width:200px;
height:200px;
background-color: yellow;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div class="yellow-box">Hay Semua</div>
</body>
</html>Jika hanya menggunakan text-align:center, posisi element hanya akan berada di tengah secara horizontal, tetapi tidak untuk vertical. Maka itu kita menggunakan cara lain, yaitu merubah display terlebih dahulu menjadi flexible yaitu dengan menambahkan nilai display:flex. Setelah itu tambah baris justify-content:center untuk membuat element berada ditengah secara horizontal. Untuk membuat posisi element berada ditengah secara vertical cukup tambahkan baris align-items:center Tentu mudah bukan?
Framework Bootstrap
Dan jika kamu belajar CSS langsung menggunakan framework bootstrap akan lebih mudah lagi, dengan hanya menambahkan class sebagai berikut kamu akan menghasilkan preview yang sama dengan yang sebelumnya. Sayangnya di bootstrap untuk menambahkan class dengan width dan height statis tidak ada. Hanya ada untuk persen seperti w-100 = width:100%, atau w-50 = width 50%. Jadi kita bisa menambahkan width dan heightnya dengan menambahkan style di div tersebut seperti code di bawah ini:
<div style="width:200px; height:200px;" class="bg-warning d-flex align-items-center justify-content-center">Hay Semua</div>Framework Tailwind
Untuk framework tailwind hampir sama saja dengan bootstrap tetapi penamaan class sedikit berbeda. Dan di tailwind kamu bisa menambahkan height dan width secara statis tanpa harus menggunakan persen, karena di tailwind memiliki class yang lebih lengkap dan flexible agar kamu lebih leluasa untuk custom tampilan website kamu. Dan untuk tailwind codenya seperti di bawah ini:
<div class="h-80 w-80 bg-yellow-400 flex items-center justify-center">Hay Semua</div>Posisi Text Berada Di Tengah Gambar
Dan bagaimana untuk kondisi pada gambar ke 2? Jika kamu ingin menambah caption di tengah-tengah gambar, pastikan gambar dan caption tersebut tergabung dalam 1 div. Beri ukuran height dan width yang statis pada div parent terlebih dahulu. Di sini saya akan mencoba memberi width dan height yang sama yaitu 500px agar menjadi persegi. Dan untuk tulisan bisa menimpa gambar, kita berikan position:absolute. Jangan lupa untuk parent div kita berikan position:relative. Biar posisi dari text tidak keluar dari posisi div parent tersebut.
Jika posisi text sudah menimpa gambar, tinggal kita mengatur posisi text tersebut agar berada di tengah-tengah gambar dengan menambahkan top:50%, left:50% dan transform: translate(-50%,-50%). Seperti code di bawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.parent{
position: relative;
width:500px;
height:500px;
}
.text{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div class="parent">
<img src="https://placehold.co/500">
<div class="text">Hay Semua</p>
</div>
</body>
</html>Baca juga: Cara membuat submit button loading menggunakan CSS & Javascript
Bagaimana Dengan Gambar Yang Fleksible?
Tapi bagaimana kalau div parentnya tidak mau di bikin statis? Hanya mau menggunakan image dengan ukuran yang fleksible? Mudah saja kita hanya butuh merubah beberapa 1 line saja. Misalkan kita memiliki gambar dengan ukuran 800px x 400px. Kamu cukup mengganti width pada parent div menjadi width:fit-content dan hapus bagian heightnya. Codenya menjadi seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.parent{
position: relative;
width:fit-content;
}
.text{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div class="parent">
<img src="https://placehold.co/800x400">
<div class="text">Hay Semua</p>
</div>
</body>
</html>Bagaimana apakah sudah mulai paham penggunaan properti CSS untuk menempatkan posisi element berada di tengah?. Ini mungkin cuma beberapa hal simple yang mungkin kita temui saat sedang melakukan layouting website. Kamu mungkin akan menemukan lebih banyak problem ketika membuat tampilan website dalam skala besar. Dengan banyak berlatih dan memahami properti-properti CSS dan menguasai teknik-teknik di atas, kamu dapat meningkatkan kemampuan desain web yang baik dan menciptakan tata letak yang seimbang serta menarik.
Semoga membantu 🙂
