css -- vertical-align · 前端知識 -- 學習整理

>[success] # vertical-align 1. 當元素有圖片，有文字時 ![](https://img.kancloud.cn/5c/66/5c66099fa4eda38ac1599a4300ea44d7_546x184.png) 2. 有圖片，有文字，有inline-block（比圖片要大） ![](https://img.kancloud.cn/fa/25/fa25093c67f348070984c91673c66ce9_680x218.png) 3. 有圖片，有文字，有inline-block（比圖片要大）而且設置了margin-bottom ![](https://img.kancloud.cn/a8/bd/a8bdbf36a7b8518f2ba495ae0c9313cf_705x253.png) 4.有圖片、文字、inline-block（比圖片要大）而且設置了margin-bottom并且有文字 ![](https://img.kancloud.cn/44/47/44477ed9af016c80333a46c40daed1b9_620x295.png) 出現上面這四種情況原因都是因為默認基線(baseline)對其 ![](https://img.kancloud.cn/3c/71/3c7156c39cfc253f6f4f94ac4b2d28bc_685x263.png) * 因為基線對齊所以行內塊有文字時候效果 ![](https://img.kancloud.cn/e2/c9/e2c9752d67911aded22b877674865ffc_590x291.png) >[danger] ##### vertical-align\-- 行內塊元素垂直對齊 ~~~ 1.vertical-align : baseline |top |middle |bottom 解釋： baseline -- 基線對齊 top -- 頂部對齊 middle -- 垂直居中 bottom -- 底部對齊 2.圖片和文字對齊 3.去除圖片底側空白縫隙，在低版本瀏覽器img的底線會和父級盒子的基線對齊。這樣會造成一個問題，就是圖片底側會有一個空白縫隙。解決辦法：給img vertical-align:middle | top 或者給img 添加 display：block; 轉換為塊級元素就不會存在問題了。 ~~~ * 常見圖片和文字默認基線對齊 ![](https://box.kancloud.cn/6709ae785ca502f9a9d3a3fc2592764f_351x145.png) * 為了讓文字在圖片居中對齊，給圖片設置vertical-align ![](https://box.kancloud.cn/47cb5cb4a31f75f77a7a2c4576a17ebe_259x159.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ vertical-align:middle; } </style> </head> <body> <div> <img src="images/2.png"> 222 </div> </body> </html> ~~~ >[danger] ##### 解決圖片下邊緣的間隙方法 1. vertical-align設置成top/middle/bottom 2. 將圖片設置為block元素,行內和行內塊會基線對其