Question

深入理解vertical-align

Answer 1

1 .vertical-align是line-height的好基友，凡是line-height起作用的地方，vertical-align基本都起作用
2 .可以精确控制内联元素的垂直对齐位置

1 .文本之类的的内联元素，比如字符x的下边缘，如果是替换元素就是替换元素的下边缘，比如图片的下边缘
2 .inline-block元素

3 .实践：小图标和后面文字对齐:不受font-size大小影响.但是现在图表应该都是svg吧。精灵图这种感觉资源还是有点大

1 .默认值是baseline,也就是基线对齐，基线就是x的下方，所以可以看到，字母两个字下方是有被裁掉的。
2 .内联元素沿着字母x的下边缘对齐的。对于图片等替换元素，使用元素下边缘作为基线，因此是下方的排列
3 .由于相对字母的下边缘对齐，而中文和部分英文字形的下边缘要低于字母x的下边缘，因此，会给人感觉是明显偏下的，一般都会进行调整vertial-align:10px;文字就会在当前基线位置上偏移10px;

1 .baseline
2 .top/bottom

3 .middle:这个其实并不是绝对居中的。

4 .bottom
5 .这些值对齐的位置是固定的，不是我们最后想要的精确对齐效果
6 .text-top/text-bottom:盒子顶部和父级内容区域的顶部、底部对齐

1 .正数向上偏移，负数往下偏移。数值大小是相对于基线的
2 .baseline=0
3 .数值类可以之前绝对精确的垂直定位

1 .相对于line-height计算
2 .如果一个元素的line-height是20px;那么vertical-align:-25%相当于设置vertical-align:-5px;

1 .只能用于内联元素，或者display:table-cell的属性
2 .只能作用在display值为inline,inline-block,inline-table,inline-flex元素上
3 .因此span,strong,em，等内联元素img，button,input等替换元素
4 .不生效的情况:一些css属性会默认改变display的计算值，导致vertical-align不生效

5 .幽灵节点太小，垂直居中无效

1 .vertical-align的百分比值是根据line-height算的
2 .

1 .按照道理来说，此时div的高度应该是line-height的高度，实际确是比这个大
2 .内外文字的font-size不一样，而span标签前面是有一个看不见的幽灵空白节点的，这里我们用x来代替
3 .他原本说的是基线的位置和font-size大小有关系，字体越大，极限的位置越在下面，文字默认都是基线对齐，如果两个字号不一样的文字放在一起的时候，就会发生上下位移，如果位移位置足够大，就会超过行高的限制，出现意外的高度。
4 .但是chrome里面没有发现基线和font-size的大小有关系，感觉还是沿着x下边一起的

5 .但是解决的办法是通用的，那就是两个文字大小一样就可以了,或者文字顶部对齐就可以vertical-align:top

1 .任何一个块级元素，里面有图片，则块级元素高度基本上都要比图片的高度高

2 .间隙产生的三大元凶

4 .解决方法

1 .对于内联元素，如果遇到了不太理解的现象，一定要想到有个看不见的幽灵空白节点和vertical-align熟悉感

1 .无论浏览器尺寸多大，无论弹框尺寸，我们的弹框永远是居中的。

2 .flex实现的:感觉这样更好理解