Margin:Auto;' Doesn't Work on Inline-Block Elements

`margin:auto;` doesn't work on inline-block elements

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>

Inline-block vs margin: 0 auto

Remove inline-block from .inner class.

display: inline-block;

makes an element well..inline. meaning it only takes as much space as it's width, and allows other inline elements to take the remaining space in the page if they can fit in.

what you want, is to create the .inner div a block element, which, even though there might be extra space after the div has taken the space for it's own width, won't let any other element take up that space. meaning, it'll be the only element in that row.

so you can use margin: auto to make it center.

I see you've used float placement on logo and contact_info meaning they'll not be fitting in the div.inner. you should use display: inline-block on these divs, so they inline and inside the div.inner.

see if this fiddle satisfies all your needs?

css - Margin Left Right Auto Not Working Despite Inline-Block and Parent Element with Fixed Width

You may want to give text-align: center to #schemeForm

<html>
    <style>
        #schemeForm {
        width: 290px;
        display: block;
        background-color: black;
        text-align: center;
}

#formButtons {
        display: inline-block; /*to make it only as wide as buttons*/
        background-color: orange;
}
    </style>
<body>
    <form id="schemeForm">
        <div id="formButtons">
            <input type="button" value="Back" />
            <input type="submit" value="Submit" />
        </div>
    </form>
</body>
</html>

Margin auto not being respected despite using display block

The label must have a width and display:block to work with margin auto.

Today it's more flexibel to use flexbox for this.

div {    color: #ffffff;    background-color: #3f3f3f;    display:flex;    flex-flow: row nowrap;    justify-content: space-between;}
label:nth-of-type(1) {    margin-left: 5px;}
label:nth-of-type(2) {    margin-right: 5px;}

<html>  <body>    <div>      <label>Left side label</label>      <label>right side label</label>    </div>  </body></html>

when will margin: auto; work and not work?

margin:auto wont work when you have not set a width or when you have a float. To center a block element you will have to give it a width then only you can use margin: 0 auto. This is for block elements. For inline elements you will have to use text-align:center.

Why doesn't margin:auto center an image?

Because your image is an inline-block element. You could change it to a block-level element like this:

<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />

and it will be centered.

Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?

My understanding is as follows (though I am happy to be corrected).

Inline elements do not have a width property, and so the "auto" cannot be calculated.
Block elements have a width property, so the width of the "auto" can be calculated.
Inline-block elements have an outside which acts inline, but an inside which acts like a block. As such, the width set acts more like the width of a word in an inline element.

div with display:inline-block margin 0 auto not center

display:table; would position it in center too:

CSS:

  .button{
    display: table;
    margin: 0 auto;
    }

HTML:

<div class="button">
<input id="abc" type="button" value="button" />
< /div>

Note: Using inline styles is a bad practice.

How do you make div elements display inline?

That's something else then:

div.inline { float:left; }.clearBoth { clear:both; }

<div class="inline">1<br />2<br />3</div><div class="inline">1<br />2<br />3</div><div class="inline">1<br />2<br />3</div><br class="clearBoth" /><!-- you may or may not need this -->

Margin:Auto;' Doesn't Work on Inline-Block Elements