前端实现图标和文字对齐有什么解决方法？我的“绝对对齐”的意思是不管是安卓设备和ios设备看着都是对齐的，最好也能实现pc上的对齐。
demo：https://jsfiddle.net/nzfbzxw6/点击预览
虽然我通过设置
vertical-align: -3%;
实现的对齐（在chrome上看着好好的），如果我要在手机设备上安卓，就要是另一个数值。ios可能又要设个数值（而且不同的苹果机型也不一样）。
对这种问题有什么更好的解决方法吗？
-------------------------- 一个调皮的分割线 ----------------------------------------
各位前辈的方法我都试了一下，发现在安卓手机上都不好使，图片居中是没有问题的，但是文字（尤其是小于12px下的）却无法居中，这可能是安卓手机bug吧...
（第一个box盒子，第二个display：inline-block，第三个background center）
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
实际上不管是line-height还是用position去定位，不管你display用的什么，不同机型的显示效果都会不一样。
水平上的差距几乎没有，垂直方向上的效果会多种多样。
遇到这种ui，我的做法是把图片写在::before里，用margin去定位，这样不管右侧的文案是否绝对的垂直居中，但至少图是相对文案去定位的，是和文案对齐的。