为什么 `margin: auto;` 不能在内联块元素上工作？

边距：自动；不适用于内联块元素

在 CSS 中，margin:auto;通常用于在页面上水平居中块元素。但是，当应用于内联块元素时，此属性变得无效。

内联块元素像内联元素一样内嵌到页面中，但可以具有特定的宽度和高度。当尝试使用 margin:auto; 将它们水平居中时，此行为会产生困难。

旧代码：

<code class="css">#container {
    /* Other styles... */
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}</code>

在此代码中，#container 元素有一个特定宽度并触发预期的居中行为。

新代码：

<code class="css">#container {
    /* Other styles... */
    display: inline-block;
}
.center {
    margin: 75px auto;
    position: relative;
}</code>

将 #container 的显示属性更改为 inline-block 会更改它与边距交互的方式。内联块元素的行为与块元素不同，并且无法使用 margin:auto; 居中。

解决方案：

将内联块元素居中水平方向，请在其包含元素上使用 text-align: center 属性：

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

<code class="css">.center {
    text-align: center;
}</code>

这会将内联块元素与其包含块元素的中心对齐。

以上是为什么 `margin: auto;` 不能在内联块元素上工作？的详细内容。更多信息请关注PHP中文网其他相关文章！