بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
CENTER atau posisi di tengah adalah posisi sebuah obyek yang berada persis di tengah-tengah pada bidang postingan artikel di blog. Selain menggunakan property Obyek, ternyata penggunaan CSS untuk mendapatkan posisi tengah pada obyek juga bisa digunakan. Oleh sebab itu, trik CSS ini terpasang pada templat dan penggunaan kode pemanggil berada di postingan yang telah ditulis. Selain center ada juga right dan left, tapi saya hanya membahas tentang Center pada Obyek di Postingan saja. Jadi simak ya tutorialnya.
Ada dua metode yang kali ini tertera dalam paparan dibawah ini. Biasanya langsung saja khan pada postingan dengan menambahkan attribut center pada artikel atau judul yang akan dibuat posisinya berada di tengah. Tapi kali ini dengan CSS yang berada di template. Sehingga tidak lagi menggunakan center tapi sudah menggunakan tag div yang berada di postingan untuk membuat obyek menjadi berada di tengah. Mudah sekali kok cara membuatnya, karena tinggal copy paste saja kode yang sudah ada di tutorial bawah ini.
Baca Juga :
Sebenarnya selain center ada tag align left dan tag align right. Dimana dalam tulisan itu, align left menjelaskan tentang posisi yang berada di sebelah kiri sedangkan untuk tag align right menjelaskan tentang posisi yang berada di sebelah kanan. Untuk posisi atas sendiri diisi dengan up dan posisi bawah diisi dengan down, tapi dua yang disebut belakangan tidak dibahas disini ya teman-teman. Cukup yang center saja, yang left dan right juga tidak dibahas, karena fokusnya memang pada posisi tengah atau center dan cara membuatnya.
Begini tutorialnya :
Membuat Obyek Menjadi Center
Cara Pertama
a. Tempel di Postingan<div class="container">
<div class="child"></div>
</div>b. Tempel di atas kode ]]></b:skin> di template tepat di atasnya
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container{
position: relative;
height: 100vh;
width: 100vw;
background-color: #101010;
}
.child{
position: absolute;
height: 200px;
width: 200px;
background-color: #2a8ae7;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
}Cara Kedua
a. Tempel di Postingan<div class="container">
<div class="child">
Ini Contoh Tengahnya
</div>
</div>b. Tempel di atas kode ]]></b:skin> di template tepat di atasnya
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container{
height: 100vh;
width: 100vw;
background-color: #101010;
position: relative;
}
.child{
background-color: #2a8ae7;
color: #ffffff;
position: absolute;
padding: 20px;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
}Nah itulah teman-teman cara membuat obyek atau tulisan juga bisa berada di tengah-tengah postingan. Silakan kalian praktekkan, supaya kalimat yang kalian tulis bisa center atau tepat ditengah. Terima kasih yang sudah mampir. Selamat malam. Semoga sukses. Amiin.
