1，基本属性
(1)，px和%
px是固定的像素值，正值向上升高，负值向下降低，可以理解为xy坐标系中的y坐标，正值向上，负值向下。
百分比单位的参考对象是line-height，计算得到的数值和px一样定位。
(2)，top/middle/baseline(默认值)/bottom
top是对齐子元素与父元素的line box顶部对齐
baseline是元素的基线与父元素的基线对齐
bottom是对齐子元素与父元素的line box底部对齐
(3)，text-bottom/text-top
text-bottom是把元素的底端和父元素的内容区域的底端对齐
text-top是把元素的顶端与父元素内容区域的顶端对齐
(4)，super/sub
super是升高元素的基线到父元素的合适上标位置
sub是降低元素的基线到父元素的合适下标位置
2，vertical作用的前提
作用元素必须是inline或者“table-cell”元素
inline水平：
<img> <span> <i> <em> <strong> <input>
<button> <a>
table-cell：
<td>
3，vertical-align与line-height之间的关系
vertical-align的百分比是以line-height为基准计算的。
下面布局为一个div内有一张图片，无其他属性设置。
图一
如图一，我们可以看出图片与下边缘存在间距，这个间距就是由于图片默认和父元素子元素基线对齐，父元素中有幽灵空白节点(在我的css中line-height中有介绍)，需要与图片基线对齐，所以图片下部就会有空白。
如果我们对父元素设置line-height时，由于line-height就会影响文字的位置，所以line-height变大，下面空隙将会变大，这里就不贴图了。
4，vertical-align的baseline
一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。
5,vertical-align的text-top/text-bottom
text-top和text-bottom是与父元素内部的子元素内容区域的顶部或者底部对齐，内容区域我在line-height深入理解中有介绍，这里再提一下，内容区域近似可以认为是我们鼠标选中字体的蓝色背景部分，而内容区域的大小只和font-size有关，与line-height没有任何关系。
6,vertical-align的属性同时起作用
(1)，top和bottom
内容为div内包含图片和span标签
图二
图片vertical-align:top，文字vertical-align:top
效果如下：
图三
图片vertical-align:top，文字vertical-align:bottom
效果如下：
图四
通过上面的两个图片我们可以看出，vertical-align对齐的基准是父元素，不会和后面的元素有关系，相互是独立的关系，所以要想图片文字中线对齐，必须同时设置图片和文字vertical-align基线对齐。
(2)，text-top和text-bottom
图片和文字同样text-top对齐
图六
由于span有一个50px的行高，所以和上面有一个间距，'xxxx'我们可以看做是父元素内部元素，内容区域去图中阴影所示。
图片是text-top对齐，span是text-bottom对齐
图七
span有一个50px的行高，所以在对齐的时候会和下部有一个间距且与左侧“xxxx”底线对齐。
7，vertical-align的应用
(1)，小图片与文字对齐
图片可能是我们用到的表情或者logo什么的，默认基线对齐，图片和文字不能居中显示，我们可以通过设置vertical-align数值调整位置，也可以让图片和文字同时vertical-align:middle，不过这样不兼容IE7。
(2)，图片水平垂直居中
图八
图九
我们让图片和span元素居中对齐，再给父元素设置text-align:center让文字居中，图片会跟着文字对齐，让span元素font-size为0，让图片完全垂直居中。
网友评论