国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > Bootstrap 垂直居中詳解

Bootstrap 垂直居中詳解

來源:千鋒教育
發布人:xqq
時間: 2023-11-24 21:14:09 1700831649

一、Flexbox 實現 Bootstrap 垂直居中

Bootstrap 的 flexbox 工具類可以讓我們很方便地實現垂直居中,具體步驟如下:

這是居中的文字

實現方式很簡單,直接在外層

元素上添加 d-flex 和 align-items-center 和 justify-content-center 兩個 class 就可以實現垂直居中效果。

其中,d-flex 代表容器為 flex 布局;align-items-center 代表垂直方向上子元素居中對齊;justify-content-center 代表水平方向上子元素居中對齊。

除此之外,Bootstrap 還提供了許多與 flexbox 相關的工具類,例如柵格系統中的與 flexbox 結合使用的類名:justify-content-{breakpoint}-{value} 和 align-items-{breakpoint}-{value}。使用這些工具類可以輕松地實現各種垂直居中效果。

二、Table元素

除了使用 flexbox,我們還可以使用 table 元素來實現垂直居中,具體步驟如下:

這是居中的文字

其中,d-table 代表外層元素為 table 布局;d-table-cell 代表單元格;align-middle 代表單元格垂直居中對齊。

需要注意的是,這種方法雖然可行,但并不推薦使用。因為 table 元素不適合用于布局,會影響語義結構。

三、Translate + Position

如果你不想使用 flexbox 或者 table 元素來實現垂直居中,還可以使用 translate 和 position 屬性來實現。具體步驟如下:

這是居中的文字

其中,position-relative 代表相對定位,是為了讓它的直屬子元素 position-absolute 具有參照物;position-absolute 代表絕對定位;top-50 和 start-50 分別代表上下左右都為50%的距離;translate-middle 代表偏移的距離,為元素自身寬度和高度的一半。

需要注意的是,這種方法雖然可行,但是需要將每個要實現垂直居中的元素的父元素都設置為 position-relative,如果場景過于復雜,會影響代碼的可讀性。

四、垂直居中網格系統

Bootstrap 推薦的方式是使用垂直居中網格系統。

具體步驟如下:

這是居中的文字

其中,row align-items-center 中的 align-items-center 表示水平居中對齊,這個只針對單行元素有效,如果是多行元素,就需要再加上 text-center 的 class 來實現居中。

五、總結

通過以上幾種方式,我們可以輕松地實現 Bootstrap 的垂直居中效果,其中以 flexbox 和垂直居中網格系統最為推薦。當然,對于場景比較特殊的情況,我們還可以使用其他方式來實現垂直居中。

聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT