問題描述

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

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

雖然我通過設(shè)置

vertical-align: -3%;

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

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

-------------------------- 一個調(diào)皮的分割線 ----------------------------------------

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

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

問題解答

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

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

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