iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 8
1
Modern Web

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

Day8--垂直置中(3)

使用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>
  • 結果
    https://ithelp.ithome.com.tw/upload/images/20200923/20129568jy6bTCC1Wv.png

上一篇
Day7--垂直置中(2)
下一篇
Day9--首尾DIV固定,中間DIV能夠自適應高度
系列文
30天CSS&Bootstrap排版統整30

尚未有邦友留言

立即登入留言