硬让学妹彻底搞懂vertical-align 底线、基线、中线的含义

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

前言

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

例子

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

1656515198342.jpg

css

.container {
  background-color: aquamarine;
}
img {
  width: 280px;
}

html

<div class="container">
<img
  src="https://picsum.photos/280/280">
</div>

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

1656514523507.jpg

css

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

html

<div class="container">
<img
  src="https://picsum.photos/280/280">
</div>

基本概念解释

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

1656513451005.jpg

图片来源：https://blog.csdn.net/VickyTsai/article/details/103000077

• 底线（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就可以了；

写在最后

我是 AndyHu，目前暂时是一枚前端搬砖工程师。

文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注呀😊

未经许可禁止转载💌

speak less，do more.