Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Kenapa margin 0 auto Tidak Berfungsi? Ini dia alasannya!

Margin 0 auto not working.

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

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

4 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. terimakasih penjelasannya, jadi ini toh penyebabnya ga mau center...
    1. tambah lagi kang penjelasan membuat object center atas bawah.. haturnuhun
  2. Makin semanat ngeblog lagi ini mas karena template baru
    1. Hehe mantap mas.. redesign menghilangkan kebosanan
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.