学习笔记，仅供参考，有错必纠
参考自：pink老师课堂笔记
vertical-align可以控制元素垂直对齐，但它只针对于行内元素或者行内块元素，不影响块级元素中的内容对齐，我们也可以通过设置该属性控制图片/表单与文字的对齐。
语法：
vertical-align : baseline |top |middle |bottom我们可以通过vertical-align控制图片和文字的垂直关系了，默认的图片会和文字基线对齐：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> <style> div { border: 2px solid red; } .one { vertical-align: baseline; } .two { vertical-align: bottom; } .three { vertical-align: middle; } </style> </head> <body> <div> <img src="image/TX.jpg" class="one" width="200px"> 安徽财经大学 </div> <div> <img src="image/TX.jpg" class="two" width="200px"> 安徽财经大学 </div> <div> <img src="image/TX.jpg" class="three" width="200px"> 安徽财经大学 </div> </body> </html>页面：
首先，我们看一个示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> <style> div { border: 2px solid red; } </style> </head> <body> <div> <img src="image/TX.jpg" class="one" width="200px"> 安徽财经大学 </div> </body> </html>页面：
我们可以清楚的看到，图片下面多了一条缝隙，现在，我想把它去除，就可以给vertical-align属性设置top |middle |bottom属性值：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> <style> div { border: 2px solid red; } img { vertical-align: top; } </style> </head> <body> <div> <img src="image/TX.jpg" class="one" width="200px"> 安徽财经大学 </div> </body> </html>页面：
