CSS高階技巧 之 垂直對齊方式vertical-align的應用
阿新 • • 發佈：2020-12-14
技術標籤：css
CSS的vertical-align屬性應用
一、設定圖片或者表單（行內塊元素）和文字垂直對齊。
用於設定一個元素的垂直對齊方式，但是它只針對行內元素或者行內塊元素有效。
語法：
vertical-align: baseline | top | middle | bottom 
| 值 | 描述 |
| baseline | 預設，元素放置在父元素的基線上 |
| top | 把元素的頂端與行中最高元素的頂端對齊 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的頂端與行中最低的元素的低端對齊 |
二、解決圖片底部預設空白縫隙
給圖片設定外邊框後，圖片底部與邊框會有一個空白縫隙，原因是行內塊元素會和文字基線對齊。
解決方法：
- 給圖片新增vertical-align: middle | top | bottom （不能是baseline基線對齊）
- 把圖片轉換為塊級元素 display: block