vertical-align家族基本认识

小图片与文字：平时-5px效果较好

大小不固定的图片或多行文字的垂直居中

相对于父级元素对齐

盒子线与父级对齐

混杂属性

解决方法一：font-size：0

解决方法二：后面放一个内联元素

vertical-align：super、sub

同理于

vertical-align：text-top/text-bottom

 实际作用

vertical-align：bottom

vertical-align：top

vertical-align：middle

完全垂直居中：font-size:0 vertical-align：middle

table-cell：td单元格不足高度会用padding填补

字符行高变成0 高度变成0、字符垂直中心线变成图片边缘;行高是0，那么半行间距则会等于 -font-size/2 (必须是宋体，老师之前的课程中有讲).所以盒子才会下移font-size/2 的距离。半行间距是正盒子会上移，是负盒子会下移。

解决办法：vertical-align:top

line-height：0；vertical-align:top  去掉图片底下白框

vertical-align支持的属性值以及组成

inherit 继承

数值百分比类

vertical-align百分比是相对于line-height值计算的.

"匿名inline元素"的实例.

默认状态下的(泛)inline水平元素:

    图片/按钮/文字/单元格

注意这里的"未知元素"

inline水平 和 table-cell元素

vertical-align 只能应用于"内联"元素 和 "表单元"元素.

vertical-align 的百分比值是相对于line-height计算的.

css属性中 支持"负值"的属性.

vertical-align设置为负值使文字和图片对齐

vertical-align关注元素和父级的关系，与前后元素没有直接影响

设置文字为text-top时，文字line boxes（由行高决定）与父级content-area对齐，

使用HTML的sub和sup实现下标和上标功能，等同于vertical-align的sub和super

表情图标使用文本底部比较合适，不受行高以及其他内联元素影响

元素vertical-align垂直对齐的位置与前后的元素都没有关系，只与父级的content-area有关，content-area意味着与line-height无关，与font-size有关

vertical-align为text-top和text-bottom时的表现

td单元格不足高度会用padding填补

font-size设置为0的时候，图片会完全垂直居中

容器中心在content-area的中心

元素中心点与x的中心点（x的基线向上1/2 x的高度）是对齐的

vertical-align：top意味着元素顶部和整行的顶部对齐

vertical-align：bottom意味着元素底部和整行的底部对齐

inline-block元素里面没有内容时，基线为底边。里面有文字内容时，基线为最后一个line box的基线