Css---vertical-align 属性的用法与应用
一、在页面布局里，居中问题是非常常见的！
1.有宽度的块级元素水平居中对齐，是margin:0 auto;
2.让文字居中对齐，是text-align:center;
而 vertical-align：垂直对齐，它只针对行内元素或者行内块元素
先看w3c的官方说明：
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
3.先理解下基线是什么
基线的位置并不是固定的：
在文本之类内联元素中，基线是字符x的下边缘位置
在像
img元素中基线就是下边缘。在
inline-block元素中，也分两种情况
如果该元素中有内联元素，基线就是最后一行内联元素的基线。
如果该元素内没有内联元素或者overflow不是visible，其基线就是margin的地边缘。
二：vertical-align 属性的用法
1. 在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
td {vertical-align: middle;}2.该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
案例一：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.app {width: 200px;height: 196px;box-sizing: border-box;border: 1px solid red;}img {width: 100px;height: 100%;/* vertical-align: text-bottom; */}</style>
</head><body><div class="app"><img src="./1.jpg" alt=""> 文字gx</div>
</body></html>运行结果：
造成文字超出盒子的原因是img标签的的基线是下边缘线，而文字的基线是字母x的下边缘线，如果我们想让文字不超出盒子，就可以利用vertical-align属性
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
在这里行内元素的基线就是字母x的下边缘线，该元素所在行的基线就是图片下边缘线
所以我们可以为该元素（img）设置vertical-align属性从而影响行内元素的基线（文字的基线）
img {width: 100px;height: 100%;vertical-align: text-bottom;}给img增加vertical-align: text-bottom后会使文字的基线从字母x的下边缘线变为文字的下边缘线对齐img的基线（img的下边缘线）
运行结果：
案例二：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.app {box-sizing: border-box;width: 400px;height: 400px;border: 2px solid red;/* display: table; *//* font-size: 0; */}.first {display: inline-block;width: 100px;height: 100px;background-color: red;/* vertical-align: middle; */}.second {display: inline-block;width: 30px;height: 30px;background-color: pink;}</style>
</head><body><div class="app"><div class="first"></div><div class="second"></div></div>
</body></html> 
给两个div设置属性 display: inline-block后，两个盒子的基线都是盒子的下边缘线，如果我想让第二个div向上移动，就可以通过给第一个div设置 vertical-align: middle从而影响第二个div的基线，使第二个div向上移动
vertical-align: middle的意思是使第二个div的基线对齐第一个div的中垂线
.first {display: inline-block;width: 100px;height: 100px;background-color: red;vertical-align: middle;}执行后：
三：vertical-align 属性应用
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul {border: 2px solid red;}li {display: inline-block;height: 200px;width: 50px;background-color: pink;}</style>
</head><body><ul><li></li><li></li><li></li></ul></body></html>执行结果：
可以看到为每个li设置display: inline-block后，在水平排列了，但是底部距离有一点间隙，这就可以为li在垂直方向上设置vertical-align: middle
当只在第一个li设置vertical-align: middle时
可以看到底部间隙已经消失了，但是排版错了，这时可以为每个li都设置vertical-align: middle
li {display: inline-block;height: 200px;width: 50px;background-color: pink;vertical-align: middle;}运行：
