# 到底为什么用img标签实现icon的时候经常对不齐文字

* 抖音：[https://v.douyin.com/hB2PCsd/](https://v.douyin.com/hB2PCsd/)
* B站：[https://www.bilibili.com/video/BV12D4y1a7KC/](https://www.bilibili.com/video/BV12D4y1a7KC/)

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

我们来看一下

为什么同样是在行内加两个小图标

用image标签实现的

和用字体文件实现的

他们在垂直方向上的距离会有偏差

首先呢我们知道

对于image标签来说它的

vertical-align默认是baseline的

所以就意味着他肯定是

图片的底边缘

和这行文字的baseline对齐

至于这个baseline啊

前面这期视频提到过

大家可以看一下

那对于这个icon-font

它为什么会在这个位置呢

我先把它（这个截图）...

钉在这，我们来看一下这个

我找了一个在线的字体编辑器

我们来看一下这个字体

大家看这有一个baseline

跟我们画的这条线是不是一样的

所以啊进一步验证了这种icon-font呢

它也是有baseline的

那回过来可能有同学就会想到

我们能不能把这个image标签做一个

vertical-align:middle

我们来看一下啊

在这加一个vertical-align等于middle

大家看射成middle了

它明显这个图就比较偏下了

现在看还不太明显

我把这个英文先去掉

大家看是不是明显比较偏下

原因就是啊

我们的汉字字体相比于英文字体

是比较偏上的

因为英文字体里有y、j

这样的字母

我先把这个恢复过来

我们可以验证一下

这条中线在哪呢

大概就在这个位置

对于这个y、j

来说它就比较居中了

但是对于汉字来说

它就比较偏下了

所以呢用middle解决也不是特别理想

后来呢我就翻了一下

el-admin（一个第三方框架）它封装的SVG icon

因为SVG跟这个image标签一样

有同样的问题

但是呢它封装的代码里边

写了一个这样的样式

大家看首先宽高设置成1em

一个em代表着

当前这个节点的字体大小

也就说高度字体的高度

所以意味着它要保持这个icon（）

宽高跟这个字体的高度保持一致

然后呢设了一个vertical align等于-0.15em

也就意味着他让这个图标啊

在base-line的基础上向下再偏移15%

那这个15%是怎么来的我也不知道哈

不过我看了icon-font他导出来的图标

大部分15%是够用的

我们来试一下啊

我们首先我们设置一个高度

宽度就不设置了1em

然后呢

我们设一个vertical-align来等于负的0.15em

我们再来看一下效果

大家看这样就比较完美了

好处是什么呢

就是我们改变它的font-size

它也不受影响

大家看font size比如说

大家看这个图片的大小也会跟着变

最后啊再给大家分享一个

在评论区里学到的工具

就是这个icon-moon
