`margin:auto;` doesn't work on inline-block elements
css, html, margin
Solution
It is no longer centered because it now flows on the page in the same way `inline` elements do (very similarly to `img` elements). You will have to `text-align: center` the containing element to center the `inline-block` `div`.
#container {
border: 1px solid black;
display: inline-block;
padding: 50px;
}
.MtopBig {
margin: 75px auto;
position: relative;
}
.center {
text-align: center;
}
<div class="center">
<div class="MtopBig" id="container"></div>
</div>
Problem
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> ``` DEMO fiddle.