vertical-align

前言

想必大家都用vertical-align:middle来实现过行内元素的垂直居中效果，但其实并不清楚这个css2属性的其他细节。

使用前提

其实，vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式，对块级元素的设置是没有什么用处的。

基本概念

值类型

图解关键值的位置

关键词当中的各个线的标准，默认值为baseline,不可继承。

x-height

x-height就是图中小写字母的高度，关键中与x-height有关的就是middle，其定义为基线+1/2字母x-height,也就是小写字母x的中间。而baseline定义的位置为x的下边缘。

参考标准

行内元素

我们一般会误认为所有的值都是参考父元素的，其实不然，top,bottom针对的是整行的边缘。

参考父元素

参考整行

表格中

常见场景

以下摘录了与vertical-align相关的实用问题，供大家参考学习。

垂直居中一个图标、图片与文本内容

这种场景我们经常使用，我们一起回忆下基本的代码,不同元素均设置inline-block,图片或者图标设置vertical-align:middle.

codepen地址：链接

<style>
  p>.text2{
  display:inline-block;
  width:20px;
  background:red;
}
p>.text{
  display:inline-block;
  width:20px;
  height:10px;
  background:red;
}
p > .img {
height:50px;
  vertical-align:middle;
}
</style> 
<p><img class="img" src="http://47.96.1.150/wp-content/uploads/2018/02/mywx-300x268.jpg">
  <span class="text"></span>
  <span class="text2">234</span> 
</p>

特别说明：在实际代码中，这种其实比较少的在用了。因为：1 实际中大部分的图片会被图标代替，图标直接是图标字体，所以不存在这类问题。2 有类似需要的位置一般会用两种替代方案解决：浮动/弹性盒,相比vertical-align可能差强人意的效果，浮动/弹性盒能够更加满足我们对布局效果的期望，在考虑兼容的情况下，大量的会使用浮动，否则使用flex等弹性盒。 3 当然在少数情况下，也会作为保留方案继续使用。

不定高度的行内元素垂直居中

codepen地址：链接

实现核心代码：父元素height=line-height,子元素：inline-block,vertical-align:middle,使用动画是为了让大家看到整个适配的过程都能实现垂直居中。（但这种垂直居中不是完全意义的垂直居中，你可以通过绝对定位的效果图去对比严格的效果，下面会具体讲到,原因是因为font-size导致的字体的下边缘导致的，如果你想纠正针对父元素设置font-size:0即可）

p{
 border:1px solid red; 
  height:70px;
  line-height:68px;
  font-size:0;//纠正文字下边缘的高度
}
@keyframes height{
  to{
    height:40px;
  }
}
p .img{
  height:20px;
  vertical-align:middle;
  animation:height  2s alternate infinite ease
}

图片底部空隙???

在上面其实已经提到了图片底部的空隙问题，这个空隙怎么来的呢？是字体的高度影响，即使你没有字体，也有幽灵标签（行级空白）。以字母x为例，我们通常认为的是图片底部与字体底部对齐，其实不是，其对齐的是字母x的底部，而字母x下面还有部分高度，而图片属于非字体，所以就造成了底部空隙。

codepen地址：链接 ,解决方案有2种。

1 父元素设置font-size:0,其原因是因为line-height的影响，因为此时的行高为fontsize*1,设置为没有行高，line-height:0,或者font-size:0 就不会产生底部字体高度。
2 你也可以通过另一种方案，因为这个问题是行内元素导致的，你只要将img设置为块级，就可以解决这个问题，当然这种解决方案其实不好用，因为我们一般不太能保证不放其他元素，而且真的大多数情况下，图片不会作为块级显示。

常识：元素之间左右空隙

相比上一个问题，这个大家非常常见了，就是杭级标签书写时换行，导致的其元素在展示时，出现了元素之间的空隙，这个空隙是因为空白内容具有字号导致占据空间的。codepen地址：https://codepen.io/robinson90/pen/PrZaQB

<p><span>123</span>
 <span>123</span> </p>
<style>
  p{
 border:1px solid red; 
  // font-size:0;
  position:relative;
}
p >span{
 background:red;
}
</style>

常见解决方法：

1 将行级标签的书写，放在一行，或者将下一个行标签放在前一个的结尾处（不推荐）；另外一种在之间加入注释连接，更不推荐了。
2 设置父元素的font-size为0，但这样还需要另外设置子元素的字号
3 设置为浮动

相关文档

• mdn介绍：链接
• x-height的了解：链接
• 深入理解vertical-align:链接
• 关于vertical-align你应该知道的：链接
• 张鑫旭深入理解vertical-align和line-height:链接