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

Question

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

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

虽然我通过设置

vertical-align: -3%;

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

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

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

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

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

Answer 1

文字和图标都设置display:inline-block;vertical-align:middle;这个方法大部分情况下都是可以对齐的。但是，如果是父元素定高的按钮，当图标和文字都设置了vertical-align: middle时，图标和文字可以对齐，而相对于父元素不会却垂直居中（偏下），这是由于空格和行高造成的，可设置父元素font-size:0或line-height:0。

Answer 2

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