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;}

运行：

四：总结：

1.vertical-align：垂直对齐，它只针对行内元素或者行内块元素和表单单元格框中的单元格内容的对齐方式。

2.该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐（即给该元素设置vertical-align后，会影响这一行元素的基线在垂直方向对齐该元素）