中线，基线，垂直居中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效果只是一种近似的效果。原因很简单，因为不同的字体，其在行内盒子中的位置是不一样的，比方说’微软雅黑’就是一个字符下沉比较明显的字体，所有字符的位置相比其他字体要偏下一点。要是vertical-align: middle是相对容器中分线对齐，呵呵，你会发现图标和文字不在一条线上，而相对于字符x的中心位置对齐，我们肉眼看上去就好像和文字居中对齐了。

vertical-align:middle通常用于img元素，，，只对inline，inline-block和表单元格起作用。

例子：

	<div style="    background: #e3e3e3;">

		<img src="test.png" style="vertical-align: middle;" 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,但两者相同，上下行就没有空白了。

巴特西

中线，基线，垂直居中vertical-align:middle的一些理解

最新文章

热门文章