iT邦幫忙

2025 iThome 鐵人賽

DAY 9
0
自我挑戰組

前端轉職學習記錄系列 第 21

DAY20- CSS 基礎-交叉軸對齊:align-items-3

  • 分享至 

  • xImage
  •  

垂直居中

css

.align-center {
  display: flex;
  align-items: center;
  height: 100px;
}

html

<div class="align-center">
  <div>居中</div>
  <div>居中</div>
  <div>居中</div>
</div>

https://ithelp.ithome.com.tw/upload/images/20251005/201759652M4rYXOU9G.png


基線對齊

css

.align-baseline {
  display: flex;
  align-items: baseline;
  height: 100px;
}

html

<div class="align-baseline">
  <div style="font-size: 12px;">小字</div>
  <div style="font-size: 16px;">中字</div>
  <div style="font-size: 20px;">大字</div>
</div>

https://ithelp.ithome.com.tw/upload/images/20251005/20175965rei0hdsoHH.png


上一篇
DAY19- CSS 基礎-交叉軸對齊:align-items-2
下一篇
DAY20- CSS 基礎-交叉軸對齊練習
系列文
前端轉職學習記錄22
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言