共计 1439 个字符，预计需要花费 4 分钟才能阅读完成。
某日阅读《CSS 世界》，笔者的一段话鞭挞了我的灵魂。原文是这样的——
“说到这里，我就忍不住多说两句。很多其实工作很多年的前端开发人员，也可能不知道 vertical-align 的属性值支持数值，更不知道支持负值，这着实让我很意外“。
……
羞愧啊，满满的羞愧啊！本人便是那类前端开发人员啊~
于是自觉关了小黑屋，发了一天功，发愤图强之后写下此文，来加深我对 vertical-align 的认识，与大伙共勉！
写 vertical-align 样式的时候自动匹配出一长串的属性值，看得我眼花缭乱，怎么有那么多属性值？该用哪个？为什么这个属性值和另外一个属性值的表现形式是一样的？细数一下 vertical-align 的属性值，代码请参考 code1-1，表现形式请参考 image1-1。
code1-1
编译结果如下图：
vertical-align:middle; // middle 指元素的中点在基线加上父元素 x 字母的一半
图片高度 32px，中点即 16px，字母 x 的高度为 8px，一半即 4px，middle 指元素的中点在基线加上父元素 x 字母的一半，8px/2-32px/2=-12px。
code2-1
编译结果如下图：
vertical-align:50%; // percentage values 的参考系
图片大小是 32px32px[当前图片是 300px300px，已统一样式 img{width:32px;}]，字体大小是 chrome 默认的字体大小 16px。只显示文本的时候行高是 22px。
默认情况下给图片设置 vertical-align:50%，既然是百分比，那么就一定有参考系，究竟是以谁为参考系，有三种假设：
假设一，如果以图片的高度为参考系，图片向上偏移 32px*50% = 16px；
假设二，如果以 font-size 为参考系，图片向上偏移 16px*50% = 8px；
假设三，如果以行高 line-height 为参考系，图片向上偏移 22px*50% = 11px；
不卖关子了，当 vertical-align 设置成百分比时，它的参考系是 line-height，所以我后面列出两个设置了 line-height 的行内元素来做比较。
code2-2
编译结果如下图：
vertical-align:top; 和 vertical-align:text-top; 比较，同理 bottom 和 text-bottom 也是如此
从设置了 line-height:10px; 的两个例子就可以明显看出来 top 是与父级盒模型的上边缘对齐重合的，而 text-top 是与父级元素内容的上边缘对齐重合的。
code2-3-1
编译结果如下图：
code2-3-2
编译结果如下图：
水平位置
vertical-align:top;
vertical-align:middle;
vertical-align:baseline;
vertical-align:bottom;
水平位置从上到下的属性值依次是：top/middle/baseline/bottom
这句话的意思是说，将 top/middle/baseline/bottom 看成一条水平线，设置 vertical-align 的元素去对齐这根水平线，从下图可以看出来这根水平线的位置从上到下依次是 top/middle/baseline/bottom。
code2-4-1
编译结果如下图：
这一篇主要介绍 vertical-align 的属性，以下为完整源码，建议大家自行在浏览器操作一遍，查看编译结果加深理解。
- 上集完 -
敬请期待中、下集
