Html `margin:auto;` 不适用于内联块元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19076919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
`margin:auto;` doesn't work on inline-block elements
提问by Math chiller
I have a "container" divto which I gave margin:auto;.
我有一个“容器” div，我给了margin:auto;.
It worked fine as long as I gave it a specific width, but now I changed it to inline-blockand margin:auto;stopped working
只要我给它一个特定的width，它就可以正常工作，但现在我将其更改为inline-block并margin:auto;停止工作
Old code (works)
旧代码（作品）
#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>New code (doesn't work)
新代码（不起作用）
#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>回答by jsea
It is no longer centered because it now flows on the page in the same way inlineelements do (very similarly to imgelements). You will have to text-align: centerthe containing element to center the inline-blockdiv.
它不再居中，因为它现在以与inline元素相同的方式在页面上流动（与img元素非常相似）。您将不得不text-align: center将包含元素居中inline-blockdiv。
#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>回答by JoostS
What 'auto' means:
“自动”是什么意思：
Using autofor the horizontal margin will instruct the element to fill up the available space(source: http://www.hongkiat.com/blog/css-margin-auto/).
使用auto用于水平余量将指示元件来填充可用空间（来源：http://www.hongkiat.com/blog/css-margin-auto/）。
Why 'display: inline-block' does not center:
为什么“显示：内联块”不居中：
There is no available horizontal space in an inline setting. Before and after it are other inline elements (characters) that take up their own space. Therefore, the element will act as if the horizontal margin is set to zero.
内联设置中没有可用的水平空间。在它之前和之后是其他占据自己空间的内联元素（字符）。因此，该元素的作用就像将水平边距设置为零一样。
Why 'display: block' centers:
为什么“显示：块”中心：
When used as an element with display: blockset to it, the available horizontal space will be the full width of the parent element minus the width of the element itself. This makes sense because display: blockis reserving this horizontal space (thus making it 'available'). Note that elements with display: blockcannot be placed next to each other. The only exception occurs when you use float, but in that case you also get the (expected) zero-margin-behaviour, as this disables the horizontal 'availability'.
当用作display: block设置为它的元素时，可用的水平空间将是父元素的全宽减去元素本身的宽度。这是有道理的，因为display: block正在保留这个水平空间（从而使其“可用”）。请注意，元素display: block不能并排放置。唯一的例外是在您使用 时发生float，但在这种情况下，您也会获得（预期的）零利润行为，因为这会禁用水平“可用性”。
Solution for 'inline-block' elements:
'inline-block' 元素的解决方案：
Elements with display: inline-blockshould be approached as characters. Centering characters/text can be done by adding text-align: centerto their parent (but you probably knew that already...).
元素 withdisplay: inline-block应该作为字符来处理。可以通过将字符/文本添加text-align: center到其父项来完成居中字符/文本（但您可能已经知道......）。
回答by daGo
For elements with property display: inline-block; A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.[reference: CSS2§10.3.9]
对于具有属性显示的元素： inline-block； 'margin-left' 或 'margin-right' 的 'auto' 计算值变为使用值 '0'。[参考：CSS2§10.3.9]
