ask2 https

css如何实现图标和文字的“绝对对齐”呢？ 财富值63

2016-10-14 17:20发布

站内问答 /
12069 26 2

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

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

虽然我通过设置

vertical-align: -3%;

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

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

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

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

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

26条回答
bobomao - 这个人很懒，什么都没留下
2016-10-14 17:48

*{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标签，这样可以达到楼主想要的结果，不管外面怎变变，图片和文字都是对齐的。

一周热门 更多>