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