39

我有一个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>

演示小提琴。

4

4 回答 4

49

它不再居中，因为它现在以与元素相同的方式在页面上流动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>

于 2013-09-29T10:26:14.433 回答
25

“汽车”是什么意思：

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

为什么“显示：内联块”不居中：

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

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

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

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

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

于 2016-06-08T18:53:52.407 回答
7

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

于 2015-06-10T13:57:20.973 回答
1 
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>

于 2021-06-04T05:31:42.610 回答