Question

这是一个让我烦恼的快速问题：为什么要以

为中心

margin:0 auto

可以正常使用

display:block

但是当显示设置为

时，不会将div居中

display:inline-block

感谢您的回答

Answer 1

我的理解如下（虽然我很乐意予以纠正）。

内联元素没有width属性，因此＆＃34; auto＆＃34; 无法计算。
块元素具有width属性，因此＆＃34; auto＆＃34;的宽度可以计算。
内联块元素的外部起内联作用，但内部起块作用。因此，宽度集的作用更像是内联元素中单词的宽度。

Answer 2

请参阅http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins

块：

10.3.3正常流程中的块级非替换元素

以下约束必须包含在另一个的使用值中   属性：

'margin-left'+'border-left-width'+'padding-left'+'width'+   'padding-right'+'border-right-width'+'margin-right'=宽度   包含块

如果'width'不是'auto'和'border-left-width'+'padding-left'+   'width'+'padding-right'+'border-right-width'（加上任何一个   'margin-left'或'margin-right'不是'auto'）大于   包含块的宽度，然后是任何“自动”值   对于以下规则，“margin-left”或“margin-right”将被处理   为零。

如果以上所有都具有“auto”以外的计算值，则   值被称为“过度约束”和使用的值之一   必须与其计算值不同。如果'方向'   包含块的属性具有值'ltr'，指定的值   忽略'margin-right'的值，并计算该值   使平等成真。如果'direction'的值是'rtl'，那么这个   恰好是'margin-left'。

如果只有一个值指定为'auto'，则使用其值   从平等出发。

如果'width'设置为'auto'，则任何其他'auto'值变为'0'和   'width'来自最终的平等。

如果'margin-left'和'margin-right'都是'auto'，则使用它们的值   是平等的。这使元素相对于中心水平居中   包含块的边缘。

内嵌块：

10.3.9'内联块'，正常流程中未替换的元素

如果'width'是'auto'，则使用的值是收缩到适合的宽度   浮动元素。

'margin-left'或'margin-right'的'auto'计算值变为   使用的值为'0'。

Answer 3

我意识到我回答这个问题有点迟了，但如果你想通过在body中指定text align来将margin auto与inline-block结合起来，你可以解决这个问题...

body {
    text-align: center;
}

Answer 4

inline-block元素不尊重右边距或左边距，因此无法应用设置auto。

block元素尊重所有边距。

Answer 5

您需要了解inline boxes（不是阻止）以了解正在发生的事情。内联框包含内联项，例如文本和图像。内联块保持其在内联框内的位置，但在其框内的位置内充当块元素。就像文本中的单词不能有自己的宽度一样，内联块也不能。

The actual spec for line boxes.

为什么以margin 0为中心自动与display：block一起使用但不能与display：inline-block一起使用？

5 个答案: