iconfont的字体为什么会偏下？

Question

在引入了iconfont的图标字体后发现字体不是居中的，为什么会这样，怎样使得它能居中对齐？

Answer 1

平时你的文字怎么处理, 就用什么方法去调整

Answer 2

在 iconfont 我的项目里面可以编辑图标 调整位置或大小后重新生成代码

Answer 3

一开始我也遇到这个问题，后来我发现，只要先在iconfont里，将图标故意往上移，然后就解决你的问题了。

Answer 4

文字是基线对齐的。如果字体的基线偏上，文字就会偏下。

.icon {
  padding-top: 3px;
  margin-bottom: -3px;
}

一种经典技巧是同时设置 padding 和负 margin，此例相当于将文本基线上移 3px。

Answer 5

我跟我的设计同事也碰到了这个问题，请问这个问题是什么地方出错导致的。为什么做出来的icon不是居中的。
哪个步骤出错了，请指教。

Answer 6

相同的问题哦，求解。

Answer 7

给引入的iconfont添加vertical-align:middle;这个属性就可以解决了。文字与图片在一行无法居中对齐也是这样解决的。原因是因为在HTML元素默认是放置在父元素的基线上即beseline，而我们需要把元素放置在父元素的中部，即middle。关于什么是基线看下这个图哦。