Home  >  Q&A  >  body text

css如何实现图标和文字的“绝对对齐”呢?

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

demo:https://jsfiddle.net/nzfbzxw6/点击预览

虽然我通过设置

vertical-align: -3%;

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

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

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

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

1.png

(第一个box盒子,第二个display:inline-block,第三个background center)

高洛峰高洛峰2875 days ago945

reply all(1)I'll reply

  • 三叔

    三叔2016-10-24 16:18:26

    实际上不管是line-height还是用position去定位,不管你display用的什么,不同机型的显示效果都会不一样。

    水平上的差距几乎没有,垂直方向上的效果会多种多样。

    遇到这种ui,我的做法是把图片写在::before里,用margin去定位,这样不管右侧的文案是否绝对的垂直居中,但至少图是相对文案去定位的,是和文案对齐的。


    reply
    0
  • Cancelreply