`margin:auto;` 在 inline-block 元素上不起作用。

Question

我有一个名为“container”的

标签，给它添加了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>

演示 fiddle.

- Math chiller

---

尝试使用 display:table。请参考 https://dev59.com/HWox5IYBdhLWcg3wSCVW#9313467 - Pacerier

了解margin: auto仍然“有效”，但不再居中div。我在这里尝试解释：https://dev59.com/TWIk5IYBdhLWcg3wqPsi#37710665 - Mr. Hugo

Answer 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>

- jsea

Answer 2

关于'auto'的含义：

如果在水平外边距上使用auto，则指示元素填充可用空间（来源：http://www.hongkiat.com/blog/css-margin-auto/）。

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

在内联设置中没有可用的水平空间。它之前和之后有其他内联元素(字符)，它们占据了自己的空间。因此，元素将表现得好像水平边距设置为零一样。

为什么'display: block'可以居中：

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

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

应该将具有display: inline-block的元素视为字符。居中字符/文本可以通过向它们的父级添加text-align: center来完成(但您可能已经知道这一点了...)。

- Mr. Hugo

---

阅读此内容并进行编辑：https://www.chenhuijing.com/blog/how-well-do-you-know-display/ - devprashant

Answer 3

对于具有属性display: inline-block的元素； 在'margin-left'或'margin-right'的计算值为'auto'时，它们将成为使用值'0'。

[参考：CSS2§10.3.9]

- daGo

Answer 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>

- fatlinesofcode

---

结果的宽度将为50％。 - Diego Betto

不会的。该元素将定位在容器宽度的50％减去元素宽度的50％处。结果是该元素将在容器内居中显示。 - fatlinesofcode

如果您想让元素自己居中而不是由其父元素居中，那么这是完美的解决方案。 - Jay Dinse

Answer 5

我想要在同一行上创建两个内联div，并且其中一个位于最右边。我使用了width属性将第一个div的宽度设置为70%，剩余的宽度给予第二个div。我还使用了white-space:nowrap;来防止div换行（以实现响应式布局）。

这是我的示例。

<div style="border:1px solid black;white-space:nowrap;">
  <div style="border:1px solid black;display:inline-block;width:70%;max-width:70%;word-break:break-word;">
  <div style="border: 1px solid blue;word-break: break-word;white-space: normal;">  
  hello hi hi hi;hello hi hi hihello hi hi hihello hi hi hihello hi hi hihello hi hi hihello hi hi hihello hi hi hihello hi hi hi</div>
  </div>
  <div style="border:1px solid black;display:inline-block;width:28%;height:100%;vertical-align:top;word-break:break-word;white-space;">Right Side Inline-Div</div>
</div>

！注意white-space:normal的使用，以防止继承的空白和允许子容器中的换行

- Mahmoud Magdy