logo标签列表

为什么在display:block中使用margin 0 auto可以让元素水平居中，而在display:inline-block中却不行？

cssmargincentering
7

我有一个问题一直在困扰着我：为什么要使用居中对齐的方式？

margin:0 auto

在技术上运行良好

display:block

但是当显示设置为时，不能使div居中。

display:inline-block

感谢回答。
3
一个 inline-block 元素的行为类似于文本单词，它与其他内联项一起排列。如果你想让它们居中，你需要将 容器 的属性设置为 text-align: center;。 - ralph.m
@ralph.m 为什么不回复呢？-_- - knitevision
有趣。我把它看作是一个细微差别，因为当我用不同的显示参数和边框来测试div时，display:block的行为就像inline-block（没有占据整个容器的宽度。奇怪...）。然而，正如我之前所说，只有使用display:block才能通过margin:0 auto居中。 - Danny_Student
5个回答
6

我的理解如下（如果有错误，欢迎指正）。

  • 行内元素没有宽度属性，因此 "auto" 无法计算。
  • 块级元素有宽度属性，所以 "auto" 的宽度可以计算。
  • 行内块级元素的外部像行内元素一样，内部则像块级元素一样。因此，设置的宽度更像是行内元素中单词的宽度。
我理解文本字符块的引用。它们的宽度会随内容而扩展，当然。但是，“行内块级元素具有类似行内的外部，但类似块级的内部”的意思我不明白。在这种情况下，“外部”或“内部”是什么？ - Danny_Student
想象一个内联元素里面有一个块级元素。外部指的是内联元素。应用的任何 CSS 都会添加到块级元素中。内联块元素就像两个元素一起充当一种元素。 - RichardB
所以我理解，如果块元素的内容发生变化，那么内联元素将会适应它，但由于其“内联性质”，无法确定该元素的宽度。 - Danny_Student
这里提供的视觉响应可能有助于形象化它：https://dev59.com/lGox5IYBdhLWcg3wyXRx - 想象一下将margin:auto添加到每个显示类型中。 - RichardB
非常感谢！我现在会检查一下！ - Danny_Student
4
查看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'）大于包含块的宽度，则对于以下规则，任何'autu'值的'margin-left'或'margin-right'都被视为零。
如果以上所有属性都具有除'auto'之外的计算值，则这些值被称为“过度约束”，其中一个使用值将不同于其计算值。如果包含块的'direction'属性的值为'ltr'，则忽略'margin-right'的指定值，并计算该值使等式成立。如果'direction'的值为'rtl'，则此情况发生在'margin-left'上。
如果只有一个值被指定为'auto'，则其使用值遵循等式。
如果'width'设置为'auto'，则任何其他'autu'值都变为'0'，并且'width'遵循结果相等式。
如果'margin-left'和'margin-right'都为'autu'，则它们的使用值相等。这使元素在包含块的边缘水平居中。

内联块：

10.3.9 "内联块"，正常流中的非替换元素

如果 'width' 是 'auto'，则使用的值是与浮动元素相同的收缩适应宽度。

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

-1
我意识到回答有点晚了，但如果您想将margin auto与inline-block结合使用，可以通过在body中指定文本对齐方式来解决此问题，例如...
body {
    text-align: center;
}
-1
你需要学习关于内联盒子（而不是块级盒子）来了解发生了什么。内联盒子包含内联项，如文本和图像。内联块保持其在内联盒子中的位置，但在盒子内部的位置上作为块级元素。就像文本中的单词不能有自己的宽度一样，内联块也不能有自己的宽度。

行盒子的实际规范。

谢谢你尝试向我解释这个。我会试着去理解它。 - Danny_Student
-2

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

block元素遵循所有边距。

2
他们确实尊重边距。只是无法计算自动。 - RichardB
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接