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

Question

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.

Bettyebettzel

Try display:table. See https://mcmap.net/q/273197/-div-with-display-inline-block-margin-0-auto-not-center – Eldoraeldorado

Know that margin: auto is still 'working' but no longer centers the div. I have tried to explain this here: https://mcmap.net/q/382443/-margin-auto-doesn-39-t-work-on-inline-block-elements – Heartbroken

Answer 1

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>

Unskilled

Answer 2

What 'auto' means:

Using auto for the horizontal margin will instruct the element to fill up the available space (source: http://www.hongkiat.com/blog/css-margin-auto/).

Why 'display: inline-block' does not center:

There is no available horizontal space in an inline setting. Before and after it are other inline elements (characters) that take up their own space. Therefore, the element will act as if the horizontal margin is set to zero.

Why 'display: block' centers:

When used as an element with display: block set to it, the available horizontal space will be the full width of the parent element minus the width of the element itself. This makes sense because display: block is reserving this horizontal space (thus making it 'available'). Note that elements with display: block cannot be placed next to each other. The only exception occurs when you use float, but in that case you also get the (expected) zero-margin-behaviour, as this disables the horizontal 'availability'.

Solution for 'inline-block' elements:

Elements with display: inline-block should be approached as characters. Centering characters/text can be done by adding text-align: center to their parent (but you probably knew that already...).

Heartbroken

Read this and edit accordingly: chenhuijing.com/blog/how-well-do-you-know-display – Goer

Answer 3

For elements with property display: inline-block; A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'. [reference: CSS2§10.3.9]

Weig

Answer 4

margin-left:50%;
transform: translateX(-50%);

.container{
  border:solid 1px red;
}

.container img{
  display:inline-block;
  margin-left:50%;
  transform: translateX(-50%);
}

<div class="container">
  <img src="https://placekitten.com/100/300" />
</div>

Adaxial

the resulting width will be 50% – Muco

no it won't. The element will be positioned at 50% width of the container minus 50% width of the element. The result is the element will be centred within the container. jsfiddle.net/upba6c4j/2 – Adaxial

this is the perfect solution if you want to let the element be centered by itself and not by it's parent element – Yockey

Answer 5

I wanted to make 2 inline divs in same line together and one of them in most right, I used width to set the first div width to 70% and remaining for the second div, I also used white-space:nowrap; to prevent wrap divs in next line (to be responsive)

this is my example

<div style="border:1px solid black;white-space:nowrap;">
  <div style="border:1px solid black;display:inline-block;width:70%;max-width:70%;word-break:break-word;">
  <div style="border: 1px solid blue;word-break: break-word;white-space: normal;">  
  hello hi hi hi;hello hi hi hihello hi hi hihello hi hi hihello hi hi hihello hi hi hihello hi hi hihello hi hi hihello hi hi hi</div>
  </div>
  <div style="border:1px solid black;display:inline-block;width:28%;height:100%;vertical-align:top;word-break:break-word;white-space;">Right Side Inline-Div</div>
</div>

! note white-space:normal used to prevent the inherited white-space and allow for word-break in the child containers

Skiest