Membuat Posisi Element di Tengah Secara Vertikal dan Horizontal – Untuk membuat posisi berada di tengah secara horizontal itu mungkin sudah biasa. Hanya menggunakan property text-align:center; atau menggunakan margin:0 auto;. Tapi pada tutorial kali ini berbeda dari tutorial lainnya, saya akan berbagi tentang bagaimana caranya supaya posisi element berada di tengah bila dilihat secara vertikal maupun horizontal.
Seperti yang terlihat pada gambar di atas, posisi lingkarang tersebut tepat berada di tengah – tengah, seimbang antara kiri & kanan juga atas & bawah.
Untuk cara membuatnya lihat scriptnya si bawah ini, sangat sederhana :
CSS
.wrapper {
display:flex;
align-items:center;
width:400px;
height:400px;
background:#eee;
}
.lingkaran {
background: #e51e63;
border-radius: 50%;
box-shadow: 0px 5px 10px -2px #e51e63;
height: 50px;
margin: 0 auto;
width: 50px;
}
display:flex;
align-items:center;
width:400px;
height:400px;
background:#eee;
}
.lingkaran {
background: #e51e63;
border-radius: 50%;
box-shadow: 0px 5px 10px -2px #e51e63;
height: 50px;
margin: 0 auto;
width: 50px;
}
HTML
<div class=”wrapper”>
<span class=”lingkaran”></span>
</div>
<span class=”lingkaran”></span>
</div>
Bagian yang perlu diperhatikan adalah pada property css pada class .wrapper. Disana ada property display:flex; property ini berguna untuk mengatur element yang ada di dalamnya, jadi element yang ada di dalam wrapper saya buat supaya beris berdasarkan garis vertikal. Dan property align-items:center; berfungsi agar item – item yang ada di dalam wrapper berada pada posisi tengah yang di ambil dari garis vertikal atau garis yang di tarik dari atas ke bawah.
