首頁 >web前端 >css教學 >如何在 CSS 中只使用「display: inline-block」將區塊元素置中?

如何在 CSS 中只使用「display: inline-block」將區塊元素置中?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-12-27 03:24:10670瀏覽

How Can I Center a Block Element Using Only `display: inline-block` in CSS?

CSS 中的內聯區塊居中顯示

在給定的程式碼中,正文文字使用 text-align: center 居中對齊。 .wrap 類別以前使用 display: table 進行對齊,現在使用 display: inline-block。與使用類似表格的顯示相比,這可以實現更靈活的佈局。

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

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

透過這些更改,.wrap 元素保持與頁面中心對齊,同時允許其中的內容流動自然地,就好像它是內聯文本的一部分一樣。這種方法消除了額外的 display: table 規則的需要,從而產生更精簡和通用的 CSS 程式碼。

以上是如何在 CSS 中只使用「display: inline-block」將區塊元素置中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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