【技术等级】初级
【承接文章】《CSS段落行高，竟然能够实现垂直居中功能，神奇的CSS技术》
本文重点讲解CSS技术中文本样式的 vertical-align 属性的详细用法。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
vertical-align属性的用法较为复杂，该属性的取值较多，不了解这个属性用法的学习者，一定要坚持把这篇文章读完。
一、设置垂直方向的对齐方式：
CSS技术利用 vertical-align 属性来设置内联元素的垂直对齐方式
该属性的功能是：设置内联元素或内联块元素相对于所在行其他元素的垂直对齐方式。这里在对齐时，都是考虑基线的对齐，即内联元素的基线相对于所在行其他元素的基线的垂直对齐方式。
这里需要注意的一定要是“内联元素”或“内联块元素”。
【有关“内联元素”的知识，可以参考小海老师前面写的《CSS段落对齐方式，系统认识块级元素与内联元素，CSS前端进阶篇》一文】
该属性的取值可以有以下几种：
带有单位的数值，可以取负值，在基线对齐的基础上，内联元素向下移动一定的距离（正值）或者向上移动一定的距离（负值）。
%，可以取负值，在基线对齐的基础上，内联元素向下移动line-height属性的百分比的距离（正百分比）或者向上移动line-height属性的百分比的距离。
baseline，【默认值】基线对齐，内联元素的基线与所在行的其他元素的基线对齐。
sub，上标。
super，下标。
top，顶部对齐，内联元素的顶部与所在行的其他元素中最高的元素的顶部对齐。
text-top，文本顶部对齐，内联元素的顶部与所在行的文字顶部对齐。
middle，中部对齐，内联元素的中部与所在行其他元素的中部对齐。
bottom，底部对齐，内联元素的底部与所在行的其他元素中最低的元素的底部对齐。
text-bottom，文本底部对齐，内联元素的底部与所在行的文字底部对齐。
二、基线垂直对齐：
要想深入了解vertical-align属性各项取值的含义，首先，让我们先看一看什么是基线对齐。
例1：在段落标记<p></p>内部，放置一个图片和一行文字。HTML代码如下。
<p>
<img src="images/a.jpg" /> 小海前端
</p>
得到的效果如下图所示，仔细观察下图：图片底部和文字底部是对齐的吗？
例1的最终效果
仔细观察，其实它们底部并没有完全对齐。如果将文字的字号放大，可以看得更加明显。
将例1中的文字放大后的效果
上图中，由于文字字号的变大，在图片中只呈现了一个“小”字，但是我们完全可以看出，图片的底部并没有和文字的底部对齐。而对齐文字的这个位置实际上是文字的“基线”。
【有关“基线”的知识，可以参考小海老师前面写的《CSS段落行高，竟然能够实现垂直居中功能，神奇的CSS技术》一文】
原来，图片本身属于内联元素，而 内联元素的vertical-align属性的默认取值为baseline，即基线对齐，也就是图片的基线（底部）默认和文字的基线对齐了。
三、取值为“带有单位的数值”：
如果vertical-align属性的取值为带有单位的数值，则也是在基线对齐的基础上开始上下移动一定的距离。
如果图片的vertical-align属性取值为0px，则依然为基线对齐的位置。
如果图片的vertical-align属性取值为5px，则在基线对齐位置的基础上向下移动5px的距离。
如果图片的vertical-align属性取值为-5px，则在基线对齐位置的基础上向上移动5px的距离。
四、取值为“百分比 ”：
如果vertical-align属性的取值为百分比，则也是在基线对齐的基础上开始上下移动一定的距离。
那么，问题来了。
百分比意味着移动多少像素的距离呢？
百分比又是以什么距离为基准的呢，即谁的百分比呢？
我们前端开发工程师一定要记住：vertical-align属性的百分比取值不是父元素高度的百分比，而是 line-height 属性取值的百分比。
即：vertical-align属性的百分比取值是以line-height属性的取值为基准的，及移动距离为vertical-align属性的绝对值乘以line-height属性取值的距离数。
假设：容器的line-height属性取值为20px，则：
如果图片的vertical-align属性取值为0%，则依然为基线对齐的位置。
如果图片的vertical-align属性取值为50%，则在基线对齐位置的基础上向下移动(20px*50%)的距离，即向下移动10px。
如果图片的vertical-align属性取值为-50%，则在基线对齐位置的基础上向上移动(20px*50%)的距离，即向上移动10px。
五、取值为top和text-top：
例2：我们在例1的基础上在段落<p></p>中再添加一个图片，并设置图片的高度大于文本。
仔细阅读下列HTML代码：
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:top" />
小海前端
<img src="images/a.jpg" width="500" />
</p>
从代码中可以看出，文字“小海前端”左侧的图片设置了vertical-align属性，并取值为top。根据文字“小海前端”左右的两张图片的width属性可知，右侧图片的高度肯定比较高。
效果如下图所示。
例2的最终效果
原因是：vertical-align属性取值为top是指让设置了该属性的元素顶部和同行周围元素中最高元素的顶部对齐。从图中可知，显然最高的元素是右侧的图片，因此就呈现为上图中的外观了。
而右面的图片没有设置vertical-align属性，因此依然为“基线对齐”，即右侧图片的底部对齐文字的基线。
例3：在例2的基础上，我们将右侧图片的高度缩小至比文字还小的程度，那可想而知，左侧图片就应该与文字顶部对齐了。
仔细阅读下列HTML代码：
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:top" />
小海前端
<img src="images/a.jpg" width="100" />
</p>
从代码中可以看出，右侧图片的宽度由500改为了100，同时高度也会随之等比缩小。
最终效果如下图所示：
例3的最终效果
例4：在例2的基础上，我们调整左侧图片vertical-align属性的取值为text-top，则HTML代码如下。
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:text-top" />
小海前端
<img src="images/a.jpg" width="500" />
</p>
则最终的显示效果如下图所示。
例4的最终效果
原因是：text-top属性是要求内联元素与同行内文本的顶部对齐。因此，就出现了上图中的效果。
而右面的图片没有设置vertical-align属性，因此依然为“基线对齐”，即右侧图片的底部对齐文字的基线。
vertical-align属性还具备bottom和text-bottom取值，和这两个顶部对齐（top和text-top）的含义是类似的，希望同学们自己在电脑上尝试一下。
文章预告
下一篇文章中，小海老师会为大家讲解一个vertical-align属性和line-height属性的应用，用于去掉图片在容器中放置时，底部产生的小距离。这是前端开发中非常经典的bug解决方案，对于希望深入了解前端开发的学习者真的是非常重要。
小海教材
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
小海声明
在头条上所写的这些文章都是从前端开发的基础开始一步一步讲起的。小海老师非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我精心整理和系统归纳过的。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。