CSS Question

margin:auto; with inline-block

i have a "container"

div
to which i gave
margin:auto;
which worked fine as long as i gave it a specific
width
, but now i changed it to
inline-block
and
margin:auto;
isnt working

previous css



#container {
border: 1px solid black;
height: 500px;
width: 650px;
}
.MtopBig {
margin-top: 75px;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}


new css



#container {
border: 1px solid black;
display: inline-block;
padding: 50px;
}
.MtopBig {
margin: 75px auto;
position: relative;
}
.center {
text-align: center;
}


DEMO fiddle.

Answer

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.

http://jsfiddle.net/ca3QS/