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

Posted 2023-03-05

技术标签:

【中文标题】为啥以边距 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 居中。 【参考方案1】：

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

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

【讨论】：

我理解对文本字符块的引用。当然，它们的宽度会随着内容而扩大。但是，我不明白您所说的“内联块元素有一个内联的外部，但是一个像块一样的内部”是什么意思。 ?在这种情况下，“外部”或“内部”是什么？想象一个内联元素，里面有一个块元素。外部，我的意思是内联元素。您应用的任何 CSS 都会添加到块元素中。内联块是两种元素合二为一。所以我知道如果块元素的内容会改变，那么内联元素会适应它，但由于它是“内联性质”，所以无法确定该元素的宽度？这里给出的视觉响应可能有助于描绘它：***.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'，它们的使用值是平等的。这使元素相对于包含块的边缘。

内联块：