Teknik Centering dalam CSS
1. Menggunakan Flexbox untuk Pusat
Flexbox adalah model tata letak CSS yang kuat yang menyediakan cara yang mudah untuk memusatkan elemen baik secara maupun .
Dengan hanya beberapa baris kode, Anda dapat mencapai pemusatan yang presisi pada browser modern. Mari kita lihat contoh berikut:
BACA JUGA : Aplikasi Web Arduino dan NodeMCU Simulator
HTML:
<div class="container">
<img src="http://lorempixel.com/400/200" />
</div>CSS:
html, body, .container {
height: 100%;
}
.container {
display: flex;
justify-content: center; /* pemusatan horizontal */
}
img {
align-self: center; /* pemusatan vertikal */
}Result:
Pada contoh ini, kita memiliki div container yang melingkupi sebuah gambar. Dengan menerapkan properti flexbox, kita dapat memusatkan gambar secara horizontal dan vertikal. Aturan justify-content: center; mengatur pemusatan gambar secara horizontal, sedangkan align-self: center; mengatur pemusatan secara vertikal di dalam container.
BACA JUGA : Cara menampilkan data dengan SELECT di PHP
Dukungan Browser untuk Flexbox
Flexbox didukung dengan luas oleh mayoritas browser modern, kecuali versi Internet Explorer sebelum 10.
Namun, beberapa versi browser terbaru, seperti Safari 8 dan IE10, mungkin memerlukan awalan vendor. Untuk memastikan kompatibilitas lintas browser, Anda dapat menggunakan alat seperti Autoprefixer untuk secara otomatis menghasilkan awalan yang diperlukan.
Untuk browser lama seperti IE 8 dan 9, tersedia sebuah polyfill untuk mengaktifkan fungsionalitas flexbox.
2. Menggunakan CSS Transform untuk Center
Transform CSS menawarkan pendekatan lain dalam memusatkan elemen, terutama ketika ukuran elemen tidak diketahui.
Dengan memposisikan elemen secara absolut di dalam container yang berposisi relatif dan menerapkan properti transform yang sesuai, kita dapat mencapai pemusatan vertikal dan horizontal.
HTML:
<div class="container">
<div class="element"></div>
</div>CSS:
.container {
position: relative;
}
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Result:
Klik Disini Untuk Melihat Hasil
Pada contoh ini, div .container berfungsi sebagai container relatif, sementara div .element berposisi secara absolut di dalamnya.
Aturan top: 50%; dan left: 50%; memposisikan elemen di tengah container, dan transform: translate(-50%, -50%); memastikan pemusatan yang sempurna baik secara vertikal maupun horizontal.
Kompatibilitas Lintas Browser untuk CSS Transform
Untuk memastikan kompatibilitas dengan browser lama, perlu ditambahkan awalan vendor untuk beberapa versi tertentu. Berikut adalah deklarasi transformasi umum yang mencakup berbagai browser:
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */
-ms-transform: translate(-50%, -50%); /* IE 9 */
transform: translate(-50%, -50%);Perlu diperhatikan bahwa transformasi CSS tidak didukung oleh IE8 dan versi sebelumnya.
Pertimbangan dan Solusi Alternatif
Ketika menggunakan transformasi CSS, penting untuk memperhatikan masalah rendering yang mungkin muncul.
Elemen yang diposisikan menggunakan teknik ini dapat berada di batas piksel yang bukan bilangan bulat, sehingga terlihat buram.
BACA JUGA : Aplikasi Web Arduino dan NodeMCU Simulator
Untuk mengatasi hal ini, Anda dapat mencari solusi alternatif yang disebutkan dalam sumber daya seperti Stack Overflow.
3. Menggunakan margin: 0 auto; untuk Pusat
Untuk elemen blok dengan lebar yang ditentukan, teknik margin: 0 auto; menyediakan cara sederhana untuk memusatkan secara horizontal.
HTML:
<div class="containerDiv">
<div id="centeredDiv"></div>
</div>
<div class="containerDiv">
<p id="centeredParagraph">Ini adalah paragraf yang di tengah.</p>
</div>
<div class="containerDiv">
<img id="centeredImage" src="https://i.kinja-img.com/gawker-media/image/upload/s--c7Q9b4Eh--/c_scale,fl_progressive,q_80,w_800/qqyvc3bkpyl3mfhr8all.jpg" />
</div>CSS:
.containerDiv {
width: 100%;
height: 100px;
padding-bottom: 40px;
}
#centeredDiv {
margin: 0 auto;
width: 200px;
height: 100px;
border: 1px solid #000;
}
#centeredParagraph {
width: 200px;
margin: 0 auto;
}
#centeredImage {
display: block;
width: 200px;
margin: 0 auto;
}Result:
Pada contoh ini, kita memiliki tiga div container yang berisi elemen-elemen yang akan di pusatkan. Aturan margin: 0 auto; yang diterapkan pada elemen-elemen yang di pusatkan memastikan pemusatan horizontal dalam container.
4. Menggunakan text-align untuk Pemusatan Teks
Teknik pemusatan yang paling umum dan mudah adalah pemusatan baris teks dalam elemen. CSS memiliki aturan text-align: center; untuk tujuan ini.
HTML:
<p>Lorem ipsum</p>CSS:
p {
text-align: center;
}Teknik ini tidak berfungsi untuk memusatkan seluruh elemen blok. text-align hanya mengontrol perataan konten inline seperti teks dalam elemen blok induknya.
5. Menggunakan position: absolute untuk Pemusatan Absolut
Bekerja pada browser lama (IE >= 8), margin otomatis yang dipadankan dengan nilai nol untuk offset kiri dan kanan atau atas dan bawah, akan memusatkan elemen yang ditempatkan secara absolut dalam elemen induknya.
HTML:
<div class="parent">
<img class="center" src="http://lorempixel.com/400/200/" />
</div>CSS:
.parent {
position: relative;
height: 500px;
}
.center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Elemen-elemen yang tidak memiliki lebar dan tinggi implisit seperti gambar perlu mendefinisikan nilai-nilai tersebut.
BACA JUGA : Cara membuat aplikasi sederhana
6. Menggunakan calc() untuk Pemusatan Menggunakan Perhitungan
Fungsi calc() merupakan bagian dari sintaks baru dalam CSS3 yang memungkinkan Anda menghitung (matematis) ukuran/posisi elemen Anda dengan menggunakan berbagai nilai seperti piksel, persentase, dll. Perhatikan bahwa ketika menggunakan fungsi ini, selalu perhatikan spasi antara dua nilai calc(100% - 80px).
CSS:
.center {
position: absolute;
height: 50px;
width: 50px;
background: red;
top: calc(50% - 50px / 2); /* tinggi dibagi 2 */
left: calc(50% - 50px / 2); /* lebar dibagi 2 */
}HTML:
<div class="center"></div>7. Menggunakan line-height untuk Pemusatan Vertikal Teks
Anda juga dapat menggunakan line-height untuk memusatkan secara vertikal satu baris teks di dalam kontainer:
CSS:
div {
height: 200px;
line-height: 200px;
}Namun, ini hanya bekerja ketika teks yang akan di pusatkan terdiri dari satu baris. Jika teks tersebut meliputi beberapa baris, hasilnya tidak akan terpusat.
8. Menggunakan 3 Baris Kode untuk Memusatkan Vertikal Apapun
CSS:
div.vertical {
position: relative;
top: 50%;
transform: translateY(-50%);
}HTML:
<div class="vertical">Teks yang terpusat secara vertikal!</div>Result:
Klik Disini Untuk Lihat Hasil!
9. Pemusatan dalam Hubungannya dengan Elemen Lain
Kita akan melihat bagaimana memusatkan konten berdasarkan tinggi elemen terdekat. Kompatibilitas: IE8+ dan semua browser modern.
HTML:
<div class="content">
<div class="position-container">
<div class="thumb">
<img src="http://lorempixel.com/400/200/" />
</div>
<div class="details">
<p class="banner-title">teks 1</p>
<p class="banner-text">konten konten konten konten konten konten konten konten konten konten konten konten konten konten konten</p>
<button class="btn">tombol</button>
</div>
</div>
</div>CSS:
.content * {
box-sizing: border-box;
}
.content .position-container {
display: table;
}
.content .details {
display: table-cell;
vertical-align: middle;
width: 33.333333%;
padding: 30px;
font-size: 17px;
text-align: center;
}
.content .thumb {
width: 100%;
}
.content .thumb img {
width: 100%;
}Result:
Klik Disini Untuk Lihat Hasil!
10. Teknik Elemen “Ghost” (Hack dari Michał Czernow)
Teknik ini berfungsi bahkan ketika dimensi kontainer tidak diketahui. Buatlah elemen “ghost” di dalam kontainer yang ingin di pusatkan, dengan tinggi 100%, kemudian gunakan vertical-align: middle; pada elemen tersebut serta elemen yang ingin di pusatkan.
CSS:
/* Kontainer utama, bisa memiliki lebar dan tinggi apa pun */
.block {
text-align: center;
/* Mungkin perlu dilakukan ini jika ada risiko kontainer lebih sempit dari elemen di dalamnya */
white-space: nowrap;
}
/* Elemen "ghost" */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
/* Terdapat jarak antara elemen "ghost" dan .centered,
disebabkan oleh karakter spasi yang dirender. Dapat dihilangkan dengan
menggeser .centered (jarak geser tergantung pada jenis font),
atau dengan mengatur ukuran font menjadi nol pada .parent dan mengembalikannya
(mungkin menjadi 1rem) pada .centered. */
margin-right: -0.25em;
}
/* Elemen yang ingin di pusatkan, bisa memiliki lebar dan tinggi apa pun */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
white-space: normal; /* Mengembalikan perilaku nowrap yang diwarisi */
}HTML:
<div class="block">
<div class="centered"></div>
</div>11. Pemusatan Horizontal dan Vertikal tanpa Perlu Khawatir tentang Tinggi atau Lebar
Teknik berikut memungkinkan Anda menambahkan konten ke dalam elemen HTML dan memusatkan secara horizontal maupun vertikal tanpa harus memikirkan tinggi atau lebarnya.
BACA JUGA : Cara menampilkan data dengan SELECT di PHP
Kontainer luar harus memiliki display: table;.
Kontainer dalam harus memiliki display: table-cell;, vertical-align: middle;, dan text-align: center;.
Kotak konten harus memiliki display: inline-block;
dan jika diperlukan, perbarui penyesuaian horisontal teks dengan text-align: left; atau text-align: right;, kecuali jika Anda ingin teksnya terpusat.
Demo:
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Anda dapat menambahkan apapun di sini!
</div>
</div>
</div>CSS:
body {
margin: 0;
}
.outer-container {
position: absolute;
display: table;
width: 100%; /* Bisa memiliki lebar APAPUN */
height: 100%; /* Bisa memiliki tinggi APAPUN */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding: 20px;
border: 1px solid #000;
}Result:
