css:vertical-align 屬性應用
阿新 • • 發佈：2020-08-17
css的vertical-align屬性使用場景：經常用於設定圖片或者表單（行內塊元素）和文字垂直對齊。
官方解釋：用於設定一個元素的垂直對齊方式,但是隻針對於行內元素或者行內塊元素有效。
語法：
vertical-align:baseline | top | middle | bottom
| 值 | 描述 |
|---|---|
| beseline | 預設。元素放置在父元素的基線上 |
| top | 把元素的頂端與行中最高的頂端對齊 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的頂端與行中最低的元素的頂端對齊 |
vertical-align實現文字垂直居中對齊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { vertical-align: middle; } </style> </head> <body> <img src="lbl.jpg" alt=""> <span>文字垂直居中對齊</span> </body> </html>