iT邦幫忙

2021 iThome 鐵人賽

DAY 6
1

此篇會介紹使用 text-align、vertical-align 對齊時的注意事項以及常見問題,最後會分享兩個新手容易遇到的雷。

text-align

針對行內元素對齊的方式,但只對元素 內容 對齊,而不是元素 本身

⚠️ 僅對行內元素有作用。

text-align對齊方式

常見問題

  • text-align 沒效果
    • 原因:text-align 行內元素才會起作用。

text-align notwork

  • 解決:設置 inlineinline-tableinline-block

text-align solve

錯誤迷思

  • text-align 只能文字對齊
    • 原因:翻譯惹的禍,只要是 行內元素 標籤都會有效果。

text-align錯誤迷思

啥?假圖怎麼做?

推薦兩個我常用的網站:

fakeimg

  • 靈活度高(適合 Dev)
  • 可以更改圖片中的文字內容,在開發的時候超方便(可以先寫入圖片尺寸、描述)

picsum

  • 好看(適合 Demo)

vertical

元素 垂直 對齊的方式。(透過推擠子元素與父元素之間的間距)

⚠️ 僅對行內元素有作用。

vertical-align

正數值、負數值差異

以下範例將 vertical-align 設置於中間兩個元素。

正數值

  • 沒有設置 vertical-align 的元素向下推。

vertical-align正數
vertical-align正數

負數值

  • 有設置 vertical-align 的元素向下推。

vertical-align負數
vertical-align負數

結論

  • vertical-align 是透過 向下 推擠和父元素之間的間距所產生的。
  • 透過 正數負數 值來選擇要推擠的元素,達到 向上 推擠的 錯覺

常見問題

多行時沒效果

  • 原因:vertical-align:middle 對齊是從 <br> 斷行後的行內元素作為對齊元素。

  • 解決:設置 inline-block

很多行發現只有 最後一行 垂直置中,甚至會 破版 推擠出不明空白

  • 原因:左邊文字段落空間,是直接以右邊圖片高度的一半作為對齊位置。(而不是均分上下高度)

  • 解決:使用表格屬性在加垂直置中
display: table-cell;
vertical-align: middle;


大雷坑

分享兩個剛開始切版時最常遇到的問題。

img 預設下方會預留 2-3px 空間

  • 三種解決辦法:
    • vertical-align: middle
    • display: block(最常用)
    • 父元素設置 font-size: 0px

Collapsing margins

在某些情況下相鄰的 margin 會合併成成單一個,導致 margin 跑到外層。(僅發生於垂直方向)

原因:

  • 父元素與子元素都是 區塊元素,且內層第一個子元素(空元素不算),沒有 floatabsolute 屬性。
  • 父元素沒有 borderpaddingoverflow 屬性將內外隔開,導致垂直方向的 margin 重疊。

常用的解決方式:

解決方法放在CodePen


進化
恭喜技能進化 水操作

可以自由自在使用魔力操控間距


上一篇
第 5 集:CSS 社交距離(上)
下一篇
第 7 集:你有 Flex Style 嗎?
系列文
30 天轉生到 bootstrap 5 的意識界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言