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

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

Mary-Kate Olsen
發布: 2024-10-25 11:01:30
原創
316 人瀏覽過

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板