中线，基线，垂直居中vertical-align：middle的⼀些理解
基线：⼩写字母xxxxx的下边缘线就是我们的css基线；⼀般的⾏内元素都是vertical-align: baseline；默认设置；
x-height：就是指⼩写字母xxxx的⾼度，下边缘线到上边缘线的⾼度。
中线：我们可以近似脑补成字母x交叉点那个位置。
我们都知道，内联元素默认是基线对齐的，⽽基线就是x的底部
对于vertical-align:middle
规范中对垂直对齐的middle这么解释的：
middle: This identifies a baseline that is offset from the alphabetic baseline in the shift-direction by 1/2 the value of the x-height font characteristic. The position of this baseline may be obtained from the font data or, for fonts that have a font characteristic for “x-height”, it may be computed using 1/2 the “x-height”. Lacking either of these pieces of information, the position of this baseline may be approximated by the “central” baseline.
⼤意就是：middle指的是基线往上1/2 "x-height"⾼度。我们可以近似脑补成字母x交叉点那个位置。
有此可见，vertical-align: middle并不是绝对的垂直居中对齐，我们平常看到的middle效果只是⼀种近似的效果。原因很简单，因为不同的字体，其在⾏内盒⼦中的位置是不⼀样的，⽐⽅说’微软雅⿊’就是⼀个字符下沉⽐较明显的字体，所有字符的位置相⽐其他字体要偏下⼀点。要
css设置文字垂直居中
是vertical-align: middle是相对容器中分线对齐，呵呵，你会发现图标和⽂字不在⼀条线上，⽽相对于字符x的中⼼位置对齐，我们⾁眼看上去就好像和⽂字居中对齐了。
vertical-align:middle通常⽤于img元素，，，只对inline，inline-block和表单元格起作⽤。
例⼦：
<div >
<img src="test.png" width="100" height="100">xxxx测试
</div>
<!-- 1 div元素⾼度不固定，图⽚的底边默认与xxxx的底边对齐baseline，div⾼度119px，底下留有空隙;xxxx测试在底部;
2 div元素⾼度不固定，对img设置vertical-align:middle，div⾼度115px，底边没空隙;xxxx测试在⾼度的正中央;
3 div元素⾼度不固定，对div设置font-size:0;div⾼度115px，底边没空隙，但是span⾥的⽂字不显⽰了。
4 div元素⾼度固定，对于设置不设置vertical-align:middle只会改变后⾯⽂字的显⽰位置，默认底部，设置则中部。
-->
  个⼈理解⼀⾏与⼀⾏的空⽩就是line-height减去font-size，但两者相同，上下⾏就没有空⽩了。
1

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。