为什么 `margin: auto;` 不水平居中内联块元素？

边距：自动；在内联块元素

应用 margin:auto 时；对于具有内联块显示的 div，它可能不会按预期水平居中 div。发生这种情况是因为内联块元素的行为类似于内联元素，沿着页面流动。

在提供的代码中：

旧代码（有效）

<code class="css">#container {
  width: 200px;
  ...
}</code>

div 被赋予特定的宽度，确保它适合其父容器。

新代码（不起作用）

<code class="css">#container {
  display: inline-block;
  ...
}</code>

设置display: inline-block 允许div根据其内容收缩和增长，导致其对齐不正确。

要使div居中，代码需要：

解决方案

1. 添加文本对齐：居中；到包含元素（示例中的 .center）。

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

这可确保内联块 div 居中。

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

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