到底为什么用img标签实现icon的时候经常对不齐文字
Demo预览：
https://sunzsh.github.io/html-demos/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
最后更新于