為什麼 `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中文網其他相關文章！