首頁 >web前端 >css教學 >為什麼 `margin: auto;` 不居中內聯塊元素?

為什麼 `margin: auto;` 不居中內聯塊元素?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-10-25 11:01:30282瀏覽

Why Doesn't `margin: auto;` Center Inline-Block Elements?

邊距:自動;不適用於內聯塊元素

當涉及自動邊距時,內聯塊元素的行為與塊元素不同。在塊元素中,margin:auto;元素在其父容器內水平居中。但是,在內聯塊元素中,margin:auto;沒有效果。

範例:

<code class="css">#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}</code>

在此範例中,容器元素設定為 inline-block。當保證金:自動時;應用於元素,它不會將容器在其父容器中居中。

解:

要讓內聯塊元素居中,您可以使用 text- align:以父元素為中心。

<code class="css">.center {
    text-align: center;
}</code>
<code class="html"><div class="center">
    <div class="MtopBig" id="container"></div>
</div></code>

現在,容器元素將在中心 div 內水平居中。

以上是為什麼 `margin: auto;` 不居中內聯塊元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn