Day8--垂直置中(3)

第 12 屆 iThome 鐵人賽

DAY 8

Modern Web

30天CSS&Bootstrap排版統整系列第 8 篇

12th鐵人賽

zxc29019009

團隊nutc imac 惠靈頓牛排

2020-09-23 18:22:26

12465 瀏覽

分享至

使用align-items-center (Bootstrap結合Flexbox)

容器是Bootstrap中最基本的佈局元素，設置.container容器會自適應寬跟高。
設置.row會讓內層以flex的方式排版，而.col就是.row的flex-item。
生效條件
1.對.row加入.align-items-center，就可以讓列元素垂直置中。
範例

     <div class="container">
        <div class="row align-items-center border border-success w-25" style="height:100px;">
              <div class="w-100 h-25 border border-primary"></div>
        </div>
     </div>

結果

Day7--垂直置中(2)

Day9--首尾DIV固定，中間DIV能夠自適應高度

系列文

30天CSS&Bootstrap排版統整共 30 篇

RSS系列文訂閱系列文

9 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

30天CSS&Bootstrap排版統整系列 第 8 篇

Day8--垂直置中(3)

使用align-items-center (Bootstrap結合Flexbox)

尚未有邦友留言

標記使用者

30天CSS&Bootstrap排版統整系列第 8 篇