7

Just a quick question that was bugging my mind : Why centering with

margin:0 auto

does work fine with

display:block

but does not center a div when display is set to

display:inline-block

Thanks for answers

3
  • 3
    An inline-block element behaves a bit like a word of text. It sits inline with other inline items. If you want them centered, you have to set the container to text-align: center;
    – ralph.m
    Jun 26, 2014 at 23:57
  • @ralph.m why not answering? -_- Jun 26, 2014 at 23:59
  • Interesting. I treat it as a nuance, cause when I was testing the divs with different display parameter's and a border to help me visualize things, display:block acted like inline block (was not taking the whole width of it's container. Strange...). However, like I've stated before, only with display:block it was possible to center with margin:0 auto. Jun 27, 2014 at 0:13

5 Answers 5

6

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.
4
  • I understand the reference to text character blocks. Their width expand with content, sure. However, I did not understand what did you mean by 'Inline-block elements have an outside which acts inline, but an inside which acts like a block.' ? What is the 'outside' or 'inside' in this case ? Jun 27, 2014 at 0:18
  • Imagine an inline element with a block element inside it. By outside, I mean the inline element. Any css you apply is added to the block element. Inline-block is kind of two elements acting as one.
    – RichardB
    Jun 27, 2014 at 0:20
  • So I understand that if the content of block element will change then the inline element will adapt to it but it's not possible to determine the width of that element cause of it's 'inline nature' ? Jun 27, 2014 at 0:29
  • The visual response given here may help picture it: stackoverflow.com/questions/8969381/… - Imagine adding margin:auto to each of those display types.
    – RichardB
    Jun 27, 2014 at 0:36
4

See http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins

Blocks:

10.3.3 Block-level, non-replaced elements in normal flow

The following constraints must hold among the used values of the other properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

If 'width' is not 'auto' and 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (plus any of 'margin-left' or 'margin-right' that are not 'auto') is larger than the width of the containing block, then any 'auto' values for 'margin-left' or 'margin-right' are, for the following rules, treated as zero.

If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.

If there is exactly one value specified as 'auto', its used value follows from the equality.

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

Inline-blocks:

10.3.9 'Inline-block', non-replaced elements in normal flow

If 'width' is 'auto', the used value is the shrink-to-fit width as for floating elements.

A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.

-1

You need to learn about inline boxes (not blocks) to see what is happening. An inline box contains inline items such as text and images. An inline block maintains its position within the inline box but acts as a block element within its position inside the box. Just like a word in the text cannot have its own width, neither can an inline block.

The actual spec for line boxes.

1
  • Thanks for an attempt in explaining me this. I'll take a hook at it. Jun 27, 2014 at 0:23
-1

I realise that I am a bit late answering this, but you can get around this issue if you want to combine margin auto with inline-block by specifying text align in body as in ...

body {
    text-align: center;
}
-2

inline-block elements don't respect right or left margin, therefor the setting auto can't be applied.

block elements respect all margins.

1
  • 2
    They do respect margins. They are just unable to calculate the auto.
    – RichardB
    Jun 27, 2014 at 0:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.