首頁  >  問答  >  主體

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

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

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

虽然我通过设置

vertical-align: -3%;

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

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

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

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

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

黄舟黄舟2741 天前4653

全部回覆(22)我來回復

  • PHPz

    PHPz2017-04-17 14:20:50

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

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 14:20:50

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

    回覆
    0
  • 迷茫

    迷茫2017-04-17 14:20:50

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

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

    回覆
    0
  • 黄舟

    黄舟2017-04-17 14:20:50

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

    回覆
    0
  • 怪我咯

    怪我咯2017-04-17 14:20:50

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

    回覆
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 14:20:50

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

    回覆
    0
  • 迷茫

    迷茫2017-04-17 14:20:50

    雷雷

    我,跨度{

    雷雷

    }

    回覆
    0
  • ringa_lee

    ringa_lee2017-04-17 14:20:50

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

    回覆
    0
  • 高洛峰

    高洛峰2017-04-17 14:20:50

    雷雷

    回覆
    0
  • 天蓬老师

    天蓬老师2017-04-17 14:20:50

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

    回覆
    0
  • 取消回覆