首頁 > web前端 > css教學 > Inline-Block with Text-Align: Center 能否取代 Display: Table 以實現水平居中?

Inline-Block with Text-Align: Center 能否取代 Display: Table 以實現水平居中?

Susan Sarandon
發布: 2024-12-24 19:13:21
原創
294 人瀏覽過

Can Inline-Block with Text-Align: Center Replace Display: Table for Horizontal Centering?

使用內聯塊居中顯示:另一個解決方案

使用換行水平居中對齊元素時,常見的方法是使用 display: table 作為包裝器。然而,有些人可能更喜歡利用 display: block 或 display: inline-block 的解決方案。

最初的解決方案提出了一個問題:「包裝」所需的 display: table 以實現所需的對齊。隨著 text-align: center 應用於 body 元素和 display: inline-block 分配給換行的引入,出現了修改後的方法。透過刪除 display: table,我們得到了一種替代解決方案,可以有效地將元素居中對齊,而不施加固定的寬度限制。

更新的程式碼:

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

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}
登入後複製

此修改保留所需的對齊方式,同時為某些場景提供更清晰且可能首選的方法。

以上是Inline-Block with Text-Align: Center 能否取代 Display: Table 以實現水平居中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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