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元素,行内和行内块会基线对其