Kenapa margin 0 auto Tidak Berfungsi? Ini dia alasannya!

Postingan ini masih melanjutkan Perbedaan text-align center dan Margin 0 auto. Pada postingan sebelumnya saya sudah menjelaskan tentang CSS margin:0 auto. Namun prosedur sudah dijalankan terkadang tetap tidak berfungsi dan objek tidak mau ketengah. Kenapa itu terjadi? Ini dia penyebabnya.

Penyebabnya adalah tidak sesuai dengan ketentuan penggunaan margin:0 auto itu sendiri. Berikut adalah beberapa ketentuan penggunaan margin:0 auto.

Objek jangan menggunakan display:inline-block

Diantara kesalahan, objek menggunakan display:inline-block. Kode yang diterima adalah display:block, display:table, display:flex, display:grid

Untuk memperbaikinya, gunakan kode yang diterima, atau hapus display:inline-block.

.container{   
  height:200px;
  border:3px solid green;
}
.red{ 
  display: inline-block;
  background:red;
  width:100px;
  height:100px;
  margin:50px auto;
}

Uji Coba !

Objek jangan menggunakan float:left atau float:right

Untuk memperbaikinya, float:none atau hapus float:left atau float:right.

.container{   
  height:200px;
  border:3px solid green;
}
.red{ 
  float:right;
  background:red;
  width:100px;
  height:100px;
  margin:50px auto;
}

Uji Coba !

Objek jangan menggunakan positiont:fixed atau position:absolute

Untuk memperbaikinya, gunakan position:relative atau hapus kode.

.container{   
  height:200px;
  border:3px solid green;
}
.red{ 
  position:fixed;
  background:red;
  width:100px;
  height:100px;
  margin:50px auto;
}

Uji Coba !

Objek jangan menggunakan width:auto

Untuk memperbaikinya, gunakan ukuran pixel atau prosentase.

.container{   
  height:200px;
  border:3px solid green;
}
.red{ 
  background:red;
  width:auto;
  height:100px;
  margin:50px auto;
{

Uji Coba !

Apabila ada yang kurang, silahkan diskusikan di kolom Komentar