Align CSS

Elemen Align Center

Untuk menengahkan elemen blok secara horizontal (seperti <div>), gunakan margin: auto;

Mengatur width (lebar) elemen akan mencegah elemen membentang ke tepi containernya.

Elemen kemudian akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi rata antara dua margin:

Elemen div ini berada di tengah.

Contoh

.center {
  margin: auto;
  width: 50%;
  border: 3px solid #303F9F;
  padding: 10px;
}

Catatan: Rata tengah tidak berpengaruh jika properti width tidak diset (atau diset ke 100%).

Teks Align Center

Untuk membuat teks berada di tengah di dalam elemen, gunakan text-align: center;

Teks ini berada di tengah.

Contoh

.center {
  text-align: center;
  border: 3px solid #303F9F;
}

Menengahkan Gambar

Untuk menengahkan gambar, atur margin kiri dan kanan ke auto dan buat menjadi elemen block.

Contoh

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Align Left dan Right - Menggunakan position

Salah satu metode untuk meratakan elemen adalah dengan menggunakan position: absolute;:

Di tahun-tahun saya yang lebih muda dan lebih rentan, ayah saya memberi saya beberapa nasihat yang telah saya pikirkan sejak saat itu.

Contoh

 .right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #303F9F;
  padding: 10px;
}

Catatan: Elemen posisi absolute dihilangkan dari normal flow, dan elemen dapat tumpang tindih.

Align Left dan Right - Menggunakan float

Metode lain untuk meratakan elemen adalah dengan menggunakan properti float:

Di tahun-tahun saya yang lebih muda dan lebih rentan, ayah saya memberi saya beberapa nasihat yang telah saya pikirkan sejak saat itu.

Contoh

.right {
  float: right;
  width: 300px;
  border: 3px solid #303F9F;
  padding: 10px;
}

Clearfix Hack

Jika suatu elemen lebih tinggi dari elemen yang menampungnya, dan elemen tersebut melayang, elemen tersebut akan keluar di luar wadahnya, disini kita dapat menggunakan "clearfix hack" untuk memperbaikinya (lihat contoh di bawah).

Contoh

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Vertical Center - Menggunakan padding

Ada banyak cara untuk menengahkan elemen secara vertikal di CSS. Solusi sederhana adalah dengan menggunakan top dan bottom padding.

Saya berada di tengah vertikal.

Contoh

.center {
  padding: 70px 0;
  border: 3px solid #303F9F;
}

Untuk menengahkan baik secara vertikal maupun horizontal, gunakan padding dan text-align: center.

Saya berada di tengah vertikal dan horizontal.

Contoh

.center {
  padding: 70px 0;
  border: 3px solid #303F9F;
  text-align: center;
}

Vertical Center - Menggunakan line-height

Trik lain adalah dengan menggunakan properti line-height dengan nilai yang sama dengan properti height.

Saya berada di tengah vertikal dan horizontal.

Contoh

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid #303F9F;
  text-align: center;
}

/* Jika teks memiliki beberapa baris, tambahkan kode berikut ini: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Vertical Center - Menggunakan position dan transform

Jika padding dan line-height bukan opsi, solusi lain adalah menggunakan properti position dan transform:

Saya berada di tengah vertikal dan horizontal.

Contoh

.center {
  height: 200px;
  position: relative;
  border: 3px solid #303F9F;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Vertical Center - Menggunakan flexbox

Flexbox juga dapat digunakan untuk memusatkan sesuatu. Perlu diperhatikan bahwa flexbox tidak didukung di IE10 dan versi sebelumnya.

Saya berada di tengah vertikal dan horizontal.

Contoh

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid #303F9F;
}

Sumber referensi: w3schools