css如何实现图标和文字的“绝对对齐”呢？？

前端实现图标和文字对齐有什么解决方法？我的“绝对对齐”的意思是不管是安卓设备和ios设备看着都是对齐的，最好也能实现pc上的对齐。

demo：https://jsfiddle.net/nzfbzxw6/

虽然我通过设置

vertical-align: -3%;

实现的对齐（在chrome上看着好好的），如果我要在手机设备上安卓，就要是另一个数值。
ios可能又要设个数值（而且不同的苹果机型也不一样）。

对这种问题有什么更好的解决方法吗？

-------------------------- 一个调皮的分割线 ----------------------------------------

各位前辈的方法我都试了一下，发现在安卓手机上都不好使，图片居中是没有问题的，但是文字（尤其是小于12px下的）却无法居中，这可能是安卓手机bug吧...

（第一个box盒子，第二个display：inline-bl<爱尬聊_尬聊生活>ock，第三个background center）

---

静静买的小马甲 3小时前

元素和元素之间不要出现空格。需要实现距离用margin。

---

360U1377719505 3小时前

一般都用背景和定位的方法。vertical-align不好控制，和字体也有关系。

---

GinoMao 3小时前

---

老狼爱吃小羊 3小时前

不知道有没有更好的办法了。。

---

再见又何须再见 3小时前

只是针对你这个问题的话，可以去掉 <img src="/upload/qa/20221223/20221223142020.jpg">,直接用字符串×或者×代替。

---

噗噗卟卟 3小时前

除了上面说的各种方法外，我觉得最方便的还是干脆用个 字符图标 代替那个图片嘛。方便的很！

---