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。