首頁 >web前端 >css教學 >我可以在不使用'display: table”的情況下將內聯塊元素居中嗎?

我可以在不使用'display: table”的情況下將內聯塊元素居中嗎?

DDD
DDD原創
2024-12-28 13:15:10846瀏覽

Can I Center an Inline-Block Element Without Using `display: table`?

CSS居中顯示內聯塊

問題:

在工作代碼中,包裝類別的中心對齊方式是使用display: table 實作。但是,使用者表示喜歡使用 display: block 或 display: inline-block 來代替。問題來了:有沒有一種替代方法可以在不依賴display:table的情況下實現居中對齊?

解決方案:

要解決這個問題,只需引入text-align: center 到body 並把display: inline-block 放到包裝類中,同時消除display: table 屬性。此修改有效地將內容集中在包裝類別中,而不影響所需的顯示:內聯塊。這是修改後的 CSS:

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

以上是我可以在不使用'display: table”的情況下將內聯塊元素居中嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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