`margin:auto;` 不适用于内联块元素

Posted 2023-03-06

【中文标题】`margin:auto;` 不适用于内联块元素

【英文标题】：`margin:auto;` doesn't work on inline-block elements

【发布时间】：2013-10-05 07:04:55

【问题描述】：

我有一个“容器”div，我给了margin:auto;。

只要我给它一个特定的width，它就可以正常工作，但现在我将其更改为inline-block 并且margin:auto; 停止工作

旧代码（工作）

#container 
    border: 1px solid black;
    height: 200px;
    width: 200px;

.MtopBig 
    margin-top: 75px;

.center 
    margin-left: auto;
    margin-right: auto;
    text-align: center;

<div class="center MtopBig" id="container"></div>

新代码（不起作用）

#container 
    border: 1px solid black;
    display: inline-block;
    padding: 50px;

.MtopBig 
    margin: 75px auto;
    position: relative;

.center 
    text-align: center;

<div class="center MtopBig" id="container"></div>

DEMO fiddle.

【问题讨论】：

试试display:table。见***.com/a/9313467/632951

知道margin: auto 仍在“工作”但不再居中 div。我试图在这里解释这一点：***.com/a/37710665/2397550

【参考方案1】：

它不再居中，因为它现在以与inline 元素相同的方式在页面上流动（与img 元素非常相似）。您将必须 text-align: center 包含元素以使 inline-block div 居中。

#container 
    border: 1px solid black;
    display: inline-block;
    padding: 50px;

.MtopBig 
    margin: 75px auto;
    position: relative;

.center 
    text-align: center;

<div class="center">
    <div class="MtopBig" id="container"></div>
</div>

【参考方案2】：

对于具有 display: inline-block 属性的元素； 'margin-left' 或 'margin-right' 的计算值 'auto' 变为使用值 '0'。 [参考：CSS2§10.3.9]

【讨论】：

我相信你的话。

【参考方案3】：

“自动”是什么意思：

使用auto 作为水平边距将指示元素填充可用空间（来源：http://www.hongkiat.com/blog/css-margin-auto/）。

为什么 'display: inline-block' 不居中：

内联设置中没有可用的水平空间。在它之前和之后是占用自己空间的其他内联元素（字符）。因此，该元素的行为就像水平边距设置为零一样。

为什么“显示：阻止”中心：

当用作设置了display: block 的元素时，可用的水平空间将是父元素的全宽减去元素本身的宽度。这是有道理的，因为display: block 保留了这个水平空间（从而使其“可用”）。请注意，带有display: block 的元素不能并排放置。唯一的例外发生在您使用 float 时，但在这种情况下，您也会得到（预期的）零边距行为，因为这会禁用水平“可用性”。

'inline-block' 元素的解决方案：

带有display: inline-block 的元素应作为字符处理。可以通过将 text-align: center 添加到其父级来使字符/文本居中（但您可能已经知道...）。

【讨论】：

阅读本文并进行相应编辑：chenhuijing.com/blog/how-well-do-you-know-display

【参考方案4】：

margin-left:50%;
transform: translateX(-50%);

.container
  border:solid 1px red;


.container img
  display:inline-block;
  margin-left:50%;
  transform: translateX(-50%);

<div class="container">
  <img src="https://placekitten.com/100/300" />
</div>

【讨论】：

得到的宽度将是 50%

不，不会的。元素将定位在容器宽度的 50% 减去元素宽度的 50% 处。结果是元素将在容器内居中。 jsfiddle.net/upba6c4j/2