处理行内样式img与字体不对齐

在行内样式中, 使用 img 做为小图标时常出现字体与图片不能居中对齐的问题


原因页面渲染时, img 标签的底部与字体的 baseline 对其


不考虑flex等需要增加dom的方案外

处理方式1

flex 等可以强行剧情的布局

缺点是需要改变布局和增加 dom

处理方式2

img {
  vertical-align: middle
}

可见的是对于英文字符, 较为对其, 但对于中文效果不佳
原因是与英文字体而言中文字体的整体图形位置偏上

处理方式3

img {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}

效果较为理想