为什么以边距 0 自动居中适用于 display:block 但不适用于 display:inline-block ？答案

【问题标题】：Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?为什么以边距 0 自动居中适用于 display:block 但不适用于 display:inline-block ？
【发布时间】：2014-08-17 23:41:54
【问题描述】：

只是一个困扰我的小问题：为什么要以

为中心

margin:0 auto

可以正常使用

display:block

但在显示设置为时不使 div 居中

display:inline-block

感谢回答

【问题讨论】：

inline-block 元素的行为有点像文本中的单词。它与其他内联项目内联。如果你想让它们居中，你必须将 container 设置为 text-align: center;
@ralph.m 为什么不回答？ -_-
有趣。我将其视为细微差别，因为当我使用不同的显示参数和边框测试 div 以帮助我可视化事物时， display:block 就像内联块一样（没有占用容器的整个宽度。奇怪......） .但是，就像我之前所说的那样，只有 display:block 才能以 margin:0 auto 居中。

标签： css margin centering

【解决方案1】：

我的理解如下（虽然我很高兴得到纠正）。

内联元素没有宽度属性，因此“自动”无法计算。
块元素有一个width属性，所以“auto”的宽度可以计算出来。
Inline-block 元素的外部具有内联作用，而内部则类似于块。因此，宽度集的作用更像是内联元素中单词的宽度。

【讨论】：

我理解对文本字符块的引用。当然，它们的宽度会随着内容而扩大。但是，我不明白您所说的“内联块元素有一个内联的外部，但是一个像块一样的内部”是什么意思。 ?在这种情况下，“外部”或“内部”是什么？
想象一个内联元素，里面有一个块元素。外部，我的意思是内联元素。您应用的任何 CSS 都会添加到块元素中。内联块是两种元素合二为一。
所以我知道如果块元素的内容会改变，那么内联元素会适应它，但由于它是“内联性质”，所以无法确定该元素的宽度？
这里给出的视觉响应可能有助于描绘它：stackoverflow.com/questions/8969381/… - 想象一下为每种显示类型添加 margin:auto。
非常感谢！现在会检查它！

【解决方案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' （加上任何不是'auto'的'margin-left'或'margin-right'）大于包含块的宽度，然后是任何“自动”值对于以下规则，“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 'Inline-block'，正常流程中的非替换元素

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

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

【讨论】：

【解决方案3】：

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

The actual spec for line boxes.

【讨论】：

感谢您尝试向我解释这一点。我会抓住它。

【解决方案4】：

我意识到我回答这个问题有点晚了，但是如果您想通过在正文中指定文本对齐来将边距自动与内联块结合起来，您可以解决这个问题...

body {
    text-align: center;
}

【讨论】：

【解决方案5】：

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

block 元素尊重所有边距。

【讨论】：

他们确实尊重边距。他们只是无法计算汽车。