vertical-align属性值的分类
- 线类（baseline、top、bottom、middle）
- baseline：为vertical-align的默认值，也就是小写字母x的下边缘 详细参考
- bottom：使元素及其后代元素与行框盒子的底部对齐
- middle：使元素基于基线上移二分之一个小x的高度对齐
- top：使元素及其后代元素与行框盒子的顶部对齐
- 文本类（text-top、text-bottom）
- text-top：与父级内容区域的上边缘对齐
- text-bottom：与父级内容区域的下边缘对齐
- 上标下标类（super、sub）
- 上标super：提高盒子的基线到合适的父级上标基线的位置
- 下标sub：降低盒子的基线到合适的父级下标基线的位置
- 数值类
- 具体值：可以是正值，也可以是负值，正值向上移，负值向下移。基于基线位置计算。
- 百分比与em：是基于line-height计算的，只要是line-height起作用的地方，vertical-align就一定会起作用
vertical-align只能应用于内联元素或者是display:table-cell的元素，不支持块级元素
例：
.example{
float:left;
vertical-align:middle; /* 没有作用 */
}
.example{
position:absolute;
vertical-align:middle; /* 没有作用 */
}
---------------------------------------------------------------
.father{
height:200px;
line-height：200px;/* 如果不设置line-height将达不到视觉效果 */
}
.father img{
height:100px;
vetical-align:middle; /* 原因在于img前面的幽灵空白节点的高度无法支撑，使middle值无法按照预期的定位，但如果设置了line-height就会呈现居中的效果 */
}
--------------------------------------------------------------
/* vertical-align对table-cell自身起作用 */
.father{
height:200px;
display:table-cell;
}
.father img{
height:100px;
vertical-align:middle
}
/* 上述代码将无法呈现居中的效果，但是如果将vertical-align放在father中，就可以实现居中效果，因为vertical-align起作用的是table-cell本身*/
而与line-height同样，“幽灵空白节点”在时时刻刻影响着vertical-align发生作用，如果在写内联样式的时候，出现了一些“诡异的间隙”效果，不妨往“幽灵空白节点”的方面去考虑考虑。下面给出4种清除“幽灵空白节点的方式”：
- 块状化（图片块状化，元素块状化）：因为幽灵空白节点会出现在行框盒子前，将元素块状化，就可以避免出现它
- 容器的
line-height足够小：只要半行距出现在小写字母的下边缘或者再往上，自然而然就没有可以撑开高度的间隙 - 容器的
font-size足够小：需要line-height设置的属性值与之配合，不能让计算出来的间距更大，那样只会让间隙更大 - 元素设置其它的vertical-align属性值。“诡异间隙”产生的原因之一就是基线对齐，所以我们只需要改变vertical-align的值，改变元素的对齐方式，也同样可以解决此类问题。
inline-block的基线标准
- 一个inline-block元素，如果里面没有内联元素或者不是
overflow:visible，那么该元素的基线就是margin的底边缘- 如果有内联元素，基线就是元素里面最后一行内联元素的基线
至此，我们就了解到，几乎所有的内联元素表现出“出乎意料的效果”都是由line-height vertical-align font-size 幽灵空白节点这四个因素有关
tip：之所以与font-size有关，是因为不同的字体与字号表现形式不同，而大部分字体都在视觉上表现“下沉”，即比x的底边缘（基线）还要向下一点。并且字体与字号对text-top、text-bottom等属性值有直接影响。
当我们遇到这类情况该如何分析呢？比如说我们现在写下了这样一组元素：
<div>
<span>我是一行文字</span>
<img src="xxxxx" alt="我是一张图片"/>
</div>
<span>与<img>同是内联元素（是否替换元素暂时不论）
- 它们前面一定会存在一个“幽灵空白节点”
- 它们默认是基线对齐的，也就是图片的底边缘对齐
- 文字视觉效果上会存在一定的“下沉”效果，所以理想情况下，字体会稍微多出去一点
此时如果出现了“间隙”或者“对齐差异”，那么就应该排查是否是设置的line-height为幽灵空白节点设置了高度，导致元素对齐的基线位置发生了变化，从而出现对齐差异。或者是设置了不恰当的vertical-align属性值，导致对齐差异。我们在排查此类问题的时候，可以在前面加上一个小写的x，这样可以帮助我们更准确地定位问题。
vertical-align精准居中对齐
vertical-align不能够帮助我们进行精准的居中对齐，原因就是它是基于x的交叉点对齐，而文字大致会表现为“下沉”，middle的设置就会表现的比“居中”看似更高一些，那为什么vertical-align能够进行精准对齐呢？
不要忘记它的属性值可以设置为具体值，这个具体值的上升和下降是基于基线的
也就是说，我们可以为vertical-align设置具体的正负值，精准的调节它的对其位置，把握好这一点，我们将会省去大部分考虑如何解决这类问题的时间
