【深度探究css】--- vertical-align

提醒：内容与图片较多。。。。。。

前言：由于vertical-align这个属性w3c似乎也并没有给出比较完整的对齐规则，只是对各个值的解释（或者我的姿势不对？？？？？？？）。所以下面使用大量的测试去探究它的对齐规则。

如有不一样的见解，理解错误的地方，还望留下你的见解~感谢~

vertical-align，就跟它的名字一样，用来垂直对齐的，那么他到底是如何实现对齐的呢。在这之前，我们先来看看两张图。

首先是w3school上的一张关于vertical-align各个值的解释：

、

然后我们再来看一张用来理解这个属性的核心图：

注：红色代表文本的顶端与底端，绿色代表基线。

那么，开始吧：

首先，vertical-align我们知道在table下是让设置vertical-align是控制元素内的内容，而应用在非tab元素下的时候却是截然不同的效果，而这个非table元素只针对inline-block以及inline元素，当设置了这两个中的任意一个，其默认就会拥有vertical-align:baseline，而在block元素下是无效的，在同排没有其他元素（在文档流内元素）时也视为无效，当然我们使用display来修改让block元素支持vertical-align属性。

然后一步步往下走，为了方便，全部使用行内快来讲。。。

baseline：

   把元素放置在父元素的基线上，vertical-align的默认值。实际上就是把元素的基线与其父元素的基线对齐。那么基线又是个什么东西呢？基线就是元素内文本的下沿线，这里的下沿线指的不是中文字的下沿线，而是英文X的下沿线。如果不是很理解具体的默认位置，那么想想当初写英语单词的那个本子和上面的第二张图，应该还是比较好理解的。。。

根据解释还是有些疑惑的地方，父元素的基线的位置是如何判定的呢？

一般来讲当父元素（这里使用的是行内块，是为了与后面的实现对接，如果此父元素独占一行，设置为块级元素也无妨）内有子元素被设置"vertical-aling:baseline"并且有内容存在时，父元素的基线的位置是在子元素的基线所在位置，看下面两张图（绿色线代表基线）：

我们可以看出第一张什么都没变化 ，而第二张发生了比较奇特的事，s2位置偏移了，他们的基线对齐了。那么“父元素的基线的位置是在子元素的基线所在位置”这句话就有点说不通了啊喂，别急我们现在把两个元素的字体大小调换下看看发生什么，看图：

到这里不难看出在有子元素并且有内容的情况下，父元素基线所在位置是取在子元素还在默认位置时他们的基线与父元素顶部距离最大的那个位置，其他同行元素相对于父元素的基线对齐。

那么继续走，来看看没有内容的情况下元素的基线是在哪：

这里发现基线位置发生了改变。而这时候的基线位置是如何判断的呢？事实上当元素内无内容时是没有基线的，并且会让其元素底端与元素父元素基线对齐，而这时父元素的基线取得是距离顶部最远的那条基线，显然一整排就一条基线，那么肯定就是取它了。但是如果只是单纯的从上图根本没办法很好的判断是否是这样设置的，那么我i们测试下，我们让父元素的基线发生一次改变看下结果会是什么样的：

答案已经浮出来了，这里就不多说了。

到这里为止似乎都没见到vertical-align这个属性的出现，在开头有说过，实际上当一个元素被设置为inline或者inline-block元素或者自身就是这两个元素之一的时候，就已经自动拥有了vertical-align:baseline这个属性。好吧。。这里我们继续放图来看看设置了vertical-align：baseline后是否会发生变化：

如图所示，并没有任何变化，

然后这里还有个疑问，这个属性是否只适用于兄弟元素呢？我们来做个实验：

从图中可以看出baseline这个值是会影响到同行的其他元素的。也就是说即使不是兄弟也能触发vertical-align导致整排发生垂直偏移。

到这里为止关于baseline这个东西以及基线都讲的差不多了。然后开始去其他值那溜达溜达。

super与sub：使元素的基线与父元素的首选上下标对齐。根据权威指南上的解释，使其基线位于父元素基线的上下一定像素的距离，各个浏览器之间存在几像素偏差。先来看张图：

从左至右分别是火狐丶谷歌丶IE8下可视区尽可能对齐的情况下的基线位置，似乎连基本的基线都有些差异，火狐和谷歌的基线差异较小，IE8较大，但是火狐与谷歌的sub位置却差异略大。不排除可视区没对齐的几像素偏差。其他属性是否同样存在不同浏览器之间的差异，还需要进一步的去验证。这里就不再继续深究。

top：使元素的顶端与其父元素内的所有子元素中最顶端的元素对齐。还是一样来看张简单明了的几张图：

三张图，给了不少信息，首先top这个属性并不会影响其他元素，只影响元素本身。其次，与内容区毫无关系。只与元素的顶端。并且我们从第三张可以看到为d2加了个子元素后基线发生了变化，具体原因前面已经讲过，父元素基线位置问题。

bottom：与top同理，只是对应的位置从元素顶端变为元素底端，其他都是一致的，不放图了；

text-top与text-bottom：使元素的文本顶端丶底端与父元素的基线对齐。这个也不难理解，回头看下最前面的那张核心图。红色线就是文本的顶端以及底端。那么我们继续看图：

可以看出text-top以及text-bottom对其他元素的影响情况与top丶bottom是一致的，只影响元素本身。

middle:元素的中垂线与父元素的基线上方的某一个点对齐。一开始我以为这东西是与基线对齐的，直到查看了权威指南上的解释，父元素基线上方的某一个点，一般情况下是0.5ex,而浏览器往往把1ex处理为0.5en，。。，某一个点。。。。。？？？？？？？？？？？这个点在某些浏览器下还存在着一定差异性。。。。我们暂且不论浏览器之间的差异，来看看是否真的是基线上方的某一点吧。老样子，看图：

这里稍微解释下，我在s1内部追加了一个元素，其高度占50%，利用box-sizing修改了其计算方式，保证边框大小不影响实际的50%高度。结果显而易见,middle对齐方式是元素的中垂线与基线上方某一个点的位置对齐，而这个距离是多少呢？从结果来看，middle确实并非使元素的中垂线与父元素的基线对齐，而是与父元素基线上方0.5ex(0.25em)处的那个点对齐（见第二张图）。而关于浏览器差异性，在IE8以及谷歌下测试完发现并没什么差别。。。还是说我测试的姿势不对？？？？？放张谷歌浏览器上的测试结果图：

好的。那么就这样结束了吗？  别急，还没呢。。。既然之前有一点理解错误的地方，那么之前采用的子元素想互相剧中对齐，全部设置为middle是否真的居中了呢？我们来看看吧：

我们先看第一张图，可以看到middle的效果是正常的，这里可能会有这样一个疑惑，父元素基线位置为什么会在这个位置？这时候我们看看第二张图，似乎，d1里面的子元素基线蜜汁消失了？ 经过多番测试的结果猜测当子元素全部设置了middle以后父元素的基线将与在所有子元素中垂线对齐之后的下方某一个点对齐。然后再根据baseline的对齐规则进行对齐，最后呈现在客户端上。

length:顾名思义，使用数值来设置齐对齐方式，对齐规则为 元素相对于原本所在位置向上下方向偏移指定量。也可以理解为元素在发生baseline对齐之后再进行上下偏移。正数向上偏移，负数向下偏移。

%:使用百分比来进行对齐。对齐规则同数值方式。但是有一点不同，这个百分比的对象是line-height。。。也就是说这个百分比是根据line-height来进行计算的。。。。关于line-height与vertical-align的基情关系以及line-height这个属性的深度探究将另开篇章来诉说。

关于vertical-align的探究到此就暂时告一段落了~~~~ 如有任何不一样的见解，额外的补充以及文中出现的错误点，还望留下你的见解。以上，感谢~~~~~~~~