I have a "container" div
to which I gave margin:auto;
.
It worked fine as long as I gave it a specific width
, but now I changed it to inline-block
and margin:auto;
stopped working
Old code (works)
#container {
border: 1px solid black;
height: 200px;
width: 200px;
}
.MtopBig {
margin-top: 75px;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
<div class="center MtopBig" id="container"></div>
New code (doesn't work)
#container {
border: 1px solid black;
display: inline-block;
padding: 50px;
}
.MtopBig {
margin: 75px auto;
position: relative;
}
.center {
text-align: center;
}
<div class="center MtopBig" id="container"></div>
display:table
. See stackoverflow.com/a/9313467/632951margin: auto
is still 'working' but no longer centers the div. I have tried to explain this here: stackoverflow.com/a/37710665/2397550