> For the complete documentation index, see [llms.txt](https://sunzsh.gitbook.io/xiaoshan.bug/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sunzsh.gitbook.io/xiaoshan.bug/jiu-jing-verticalalignmiddle-de-yi-ju-zai-na-li.md).

# 究竟vertical-align:middle的依据在哪里

* 抖音：<https://v.douyin.com/hujyF1K/>
* B站：<https://www.bilibili.com/video/BV1AG4y1g7pz/>

> **Demo预览：**
>
> <https://sunzsh.github.io/html-demos/font-v-middle.html>
>
> **代码 / 文件：**
>
> <https://github.com/sunzsh/st-html-demo/blob/master/font-v-middle.html>

大家看啊

这行文字默认是baseline对齐的

也就是说这条线对齐

但是呢如果我给中间这个test

加一个vertical-align

等于middle

也就是说我

让这个test垂直居中对齐

它就会下沉

这是为什么呢

我们来看一下vertical-align

等于middle的这个解释哈

他说啊

会让这个元素的中间和谁对齐呢

和父元素的baseline

加上一半的x-height

什么意思呢

我们来看x-height就是这个高度

他所谓的x-height其实跟这个a、c、e ...

e啊这些字母高度是一致的

但是我们用x比较容易取中间的位置

他说取一半的x-height

我呀找了一个画图工具

我们在这里给大家演示一下

我们先来画一条baseline

baseline是在这里

好然后呢我们再往上加一半的x-height

就是加到差不多这个位置

换一个颜色

好这时候

如果我们来设置它的varticle-align:middle

意味着让这个元素的中间

注意这个元素的中间在哪

在这个小方块这

和这个蓝线对齐

所以他要往下沉

大家看差不多沉到这个位置

才能跟这个蓝线对齐

好所以这就不难理解

为什么视频开始的时候

给这个test加一个vertical-align:middle

它就会下沉了

大家记住这个结论

咱们下一期 一起分析一个bug