css如何實現圖標和文字的“絕對對齊”呢？

問題描述

前端實現圖標和文字對齊有什么解決方法？我的“絕對對齊”的意思是不管是安卓設備和ios設備看著都是對齊的，最好也能實現pc上的對齊。

demo：https://jsfiddle.net/nzfbzxw6/點擊預覽

雖然我通過設置

vertical-align: -3%;

實現的對齊（在chrome上看著好好的），如果我要在手機設備上安卓，就要是另一個數值。ios可能又要設個數值（而且不同的蘋果機型也不一樣）。

對這種問題有什么更好的解決方法嗎？

-------------------------- 一個調皮的分割線 ----------------------------------------

各位前輩的方法我都試了一下，發現在安卓手機上都不好使，圖片居中是沒有問題的，但是文字（尤其是小于12px下的）卻無法居中，這可能是安卓手機bug吧...

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

問題解答

實際上不管是line-height還是用position去定位，不管你display用的什么，不同機型的顯示效果都會不一樣。

水平上的差距幾乎沒有，垂直方向上的效果會多種多樣。

遇到這種ui，我的做法是把圖片寫在::before里，用margin去定位，這樣不管右側的文案是否絕對的垂直居中，但至少圖是相對文案去定位的，是和文案對齊的。