{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://wenda.whatsns.com/data/attach/logo/logo.png', '推荐 Battle field 的问题《css如何实现图标和文字的“绝对对齐”呢？》','https://wenda.whatsns.com/q-301196.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
前端实现图标和文字对齐有什么解决方法？我的“绝对对齐”的意思是不管是安卓设备和ios设备看着都是对齐的，最好也能实现pc上的对齐。
demo：https://jsfiddle.net/nzfbzxw6/
虽然我通过设置
vertical-align: -3%;实现的对齐（在chrome上看着好好的），如果我要在手机设备上安卓，就要是另一个数值。
ios可能又要设个数值（而且不同的苹果机型也不一样）。
对这种问题有什么更好的解决方法吗？
-------------------------- 一个调皮的分割线 ----------------------------------------
各位前辈的方法我都试了一下，发现在安卓手机上都不好使，图片居中是没有问题的，但是文字（尤其是小于12px下的）却无法居中，这可能是安卓手机bug吧...
（第一个box盒子，第二个display：inline-block，第三个background center）
付费偷看金额在0.1-10元之间
不知道有没有更好的办法了。。
这种方法是直接把图片设置为背景。。然后背景居中。。
除了上面说的各种方法外，我觉得最方便的还是干脆用个 字符图标 代替那个图片嘛。方便的很！
https://jsfiddle.net/lincenyi...
（2）绝对定位
只是针对你这个问题的话，可以去掉
<img src="http://s1.mi.com/m/images/20151028/top-x.png">,直接用字符串×或者×代替。元素和元素之间不要出现空格。需要实现距离用margin。
一般都用背景和定位的方法。vertical-align不好控制，和字体也有关系。
举个例子，四条属性，在文字中插入图标可以用这个办法
*{padding:0;margin:0;}
.close-btn{display:table; background:red;color:#fff;height:45px;line-height:45px;width:120px;border-radius:5px;}
.close-btn >div{display: table-cell;vertical-align: middle;width: 40%; padding: 0 4px;}
.img-responsive{text-align: right; }
.img-responsive img{vertical-align: middle;width:18px;height:auto;}
.close-des{text-align: left}
以上是针对楼主的demo的css调整，布局方面：<div class="close-des">关闭</div>给关闭多加一个div标签，这样可以达到楼主想要的结果，不管外面怎变变，图片和文字都是对齐的。
一周热门 更多>