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

Question

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

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

虽然我通过设置

vertical-align: -3%;

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

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

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

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

（第一个box盒子，第二个display：inline-block，第三个background center）

Answer 1

Both text and icons are setdisplay:inline-block;vertical-align:middle;This method can be aligned in most cases. However, if it is a button whose parent element has a fixed height, when both the icon and text are set to vertical-align: middle, the icon and text can be aligned, but they will not be vertically centered (lower) relative to the parent element. This is due to spaces and lines. Caused by height, you can set the parent element font-size:0 or line-height:0.

Answer 2

img, .wenzi{display:inline-block;}
.wenzi{margin:0 0 -8px 0} try