彻底搞懂vertical-align 底线、基线、中线的含义

前言

相信大多数掘友们应该都用过 vertical-align ，它可以用于行内元素和表格元素中实现垂直方向的居中。但在以往的使用中，我却发现了一些意外情况，让我们来看看吧！知道vertical-align 原理的小伙伴可以直接关掉文章了—.—

例子

例1. 父盒子没设置高度，为什么底部还挤出来一段距离？

css

.container {background-color: aquamarine;
}
img {width: 280px;
} 
1
2
3
4

html

 
1
2
3

例2. 设置了 vertical-align: middle;，为什么图片还没有垂直居中与父盒子？且上边挤出的距离大于下边挤出的距离？

css

.container {width: 300px;background-color: aquamarine;line-height: 200px;height: 200px;
}
img {height: 190px;vertical-align: middle;
} 
1
2
3
4

html

 
1
2
3

基本概念解释

先来看下底线、基线、中线的基本含义吧，下面的图片解释了行高和这三根线的位置。

• 底线（bottom line）：上下底线之间的距离就是行高。
• 基线（base line）：通俗的说就是与英文字母 x 最底边相切的那条线就是底线。
• 中线（middle line）：垂直与x中点的那条线

有没有感觉像小学读书时用的拼音格子本。记得那时候还说着一口方言呢，哈哈，有点扯远了。来看下面的解释吧！

解答例子中的问题

例1

vertical-align 默认是 基线对齐（baseline），也就是自己的基线和父盒子的基线对齐，而图片img莫得的基线为自己的底部，所以父盒子下方会有挤出来一段距离，

解决方案：

• 设置父盒子的字体为0，让基线和底线重合，这些就不会被挤出来了
• 想办法让img盒子的基线和父盒子的底线对齐，比如设置img盒子 vertical-align: middle;

例2

根据mdn的解释我们可以发现 vertical-align: middle; 的意思是：使元素的中部与父元素的基线加上父元素 x-height（译注：x 高度）的一半对齐。这里所说的 x-height 是指英文字母 x 的高度的意思。通常 x 的垂直中心点不是父元素的垂直中心点，且会随着父元素字体的大小变化而变化，所以才造成上下会齐出一段距离

解决方案：

• 让父盒子的 字体设置为0就可以了；