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

Question

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

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

虽然我通过设置

vertical-align: -3%;

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

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

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

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

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

Answer 1

元素和元素之間不要出現空格。需要實作距離用margin。

Answer 2

只是針對你這個問題的話，可以去掉 <img src="http://s1.mi.com/m/images/20151028/top-x.png">,直接用字串×或×代替。

Answer 3

前邊的回答已經說了,需要設定為inline-block,
具體的原理推薦張鑫旭的
CSS深入理解之vertical-align

http://www.imooc.com/learn/542

Answer 4

一般都用背景和定位的方法。 vertical-align不好控制，跟字體也有關係。

Answer 5

舉個例子，四條屬性，在文字中插入圖示可以用這個辦法

Answer 6

inline-block的元素對齊都比較麻煩。所以如果條件允許，我會選擇flex居中。

Answer 7

雷雷

我，跨度{

雷雷

}

Answer 8

使用一個p將圖片與文字包裹起來，在p裡對齊了就行

Answer 9

雷雷

Answer 10

有的時候非常噁心的偏移了1px，然後就手動margin:-1px之類的調整，還有我怎麼感覺文字或者inline的元素，總會有一點點莫名其妙的padding存在