{带图片详解}vertical-align: middle,元素垂直居中

vertical-align —垂直对齐方式

特别注意： vertical-align 不能控制块元素。

• vertical-align属性只适用于行内元素或表格单元格，默认情况下不会应用于块级元素。
  要在块级元素上应用vertical-align属性，通常需要将元素显示为inline-block或table-cell。

• 作用：用于指定同一行元素之间，或 表格单元格 内文字的 垂直对齐方式。

1.相对行的值: (作用范围: 一个元素使用及其后代元素,)

{特别注意}"及其后代元素"指的是该元素内部的所有子元素，包括-1)直接子元素、-2)子元素的子元素，-3)以及更深层次的后代元素。

• Tips: 直接子元素: 与它同级的字元素

	
相对行的值: 
下列值使元素相对整行垂直对齐：
2. vertical-align: bottom
/* bottom: 使元素及其后代元素的底部与整行的底部对齐。*/
3. vertical-align: top;
 /*top: 使元素及其后代元素的顶部与整行的顶部对齐。*/
或使用这个,没有设置line-height,由内容自动填充,就可以使用这个调整基线baseline

2.相对父元素的值

### 相对父元素的值

这些值使元素相对其父元素垂直对齐：

`baseline`

使元素的基线与父元素的基线对齐。HTML 规范没有详细说明部分[可替换元素]的基线 ，这意味着这些元素使用此值的表现因浏览器而异。

`sub`

使元素的基线与父元素的下标基线对齐。

`super`

使元素的基线与父元素的上标基线对齐。

`text-top`

使元素的顶部与父元素的字体顶部对齐。

`text-bottom`

使元素的底部与父元素的字体底部对齐。

`middle`

使元素的中部与父元素的基线加上父元素 x-height（译注：[x 高度]）的一半对齐。

重点介绍: vertical-align: middle;

有此可见，vertical-align: middle并不是绝对的垂直居中对齐，
我们平常看到的middle效果只是一种近似的效果。原因很简单，因为不同的字体，其在行内盒子中的位置是不一样的，比方说’微软雅黑’就是一个字符下沉比较明显的字体，所有字符的位置相比其他字体要偏下一点。

要是vertical-align: middle是相对容器中分线对齐，呵呵，你会发现图标和文字不在一条线上，而相对于字符x的中心位置对齐，我们肉眼看上去就好像和文字居中对齐了。

• middle ：使元素的中部 与 父元素的基线上 加上 父元素 x-height的一半对齐
• 逐个解释:
  • 父元素的基线: 基线是没有变的
    • 假如 <span>使用这个vertical-align: middle
      • <span>的父元素的基线是没有变的
  • 元素的中部: 使用这元素的整个的中部
    • <span>整个这个元素的中部
  • 父元素 x-height的一半对齐
    • 在基线的基础上,字母x的一半为基准对齐
  • "x-height"就是指的小写字母'x'的高度；术语描述就是基线和等分线mean line之间的距离。
    • 

案例一:

效果

过程变换–如下图

3.表格单元格的值 MDN Link: 表格单元格的值

`baseline` (以及 `sub`, `super`, `text-top`, `text-bottom`, `<length>`, `<percentage>`)

使单元格的基线，与该行中所有以基线对齐的其他单元格的基线对齐。

`top`

使单元格内边距的上边缘与该行顶部对齐。

`middle`

使单元格内边距盒模型在该行内居中对齐。

`bottom`

使单元格内边距的下边缘与该行底部对齐。

可以是负数。

参考链接

MDN
x-height