# 究竟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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sunzsh.gitbook.io/xiaoshan.bug/jiu-jing-verticalalignmiddle-de-yi-ju-zai-na-li.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.