vertical-align释疑

1 vertical-align使用的时机:

一个<div>/<p>中存在多个<span>/<img>，需要把<span>/<img>等inline元素按照<div>/<p>等父素的字体线对齐。

注意：这里的字体线是由父元素(<div>/<p>)的字符线确定的，父元素可以使用font-size来改变字体线的位置

 

2 在使用vertical-align时，需要理解四个重要的字符线

• text-top:          将<span>/<img>的顶端对齐到带重音符的字符的顶端，如Á字符的顶端
• middle:            将<span>/<img>的中间对齐到小写字符"x"的中间，"x"的高又叫作ex height
• baseline:         将<span>/<img>的底部对齐到不带字母下部(descender，如j的下部)的字符的底部，如"M"的底部
• text-bottom:   将<span>/<img>的底部对齐到带字母下部的字符的底部，如j,y,p的底部

3 在使用vertical-align:+/-value时，+/-value是相对于baseline的。+value偏上于baseline,-value偏下于baseline。