前端实现图标和文字对齐有什么解决方法？我的“绝对对齐”的意思是不管是安卓设备和ios设备看着都是对齐的，最好也能实现pc上的对齐。
demo：https://jsfiddle.net/nzfbzxw6/
虽然我通过设置
22
7341vertical-align: -3%;实现的对齐（在chrome上看着好好的），如果我要在手机设备上安卓，就要是另一个数值。
ios可能又要设个数值（而且不同的苹果机型也不一样）。
对这种问题有什么更好的解决方法吗？
-------------------------- 一个调皮的分割线 ----------------------------------------
各位前辈的方法我都试了一下，发现在安卓手机上都不好使，图片居中是没有问题的，但是文字（尤其是小于12px下的）却无法居中，这可能是安卓手机bug吧...
（第一个box盒子，第二个display：inline-block，第三个background center）
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
实际上不管是
line-height还是用position去定位，不管你display用的什么，不同机型的显示效果都会不一样。遇到这种ui，我的做法是把图片写在
::before里，用margin去定位，这样不管右侧的文案是否绝对的垂直居中，但至少图是相对文案去定位的，是和文案对齐的。*{padding:0;margin:0;}
.close-btn{display:table; background:red;color:#fff;height:45px;line-height:45px;width:120px;border-radius:5px;}
.close-btn >p{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调整，布局方面：<p class="close-des">关闭</p>给关闭多加一个p标签，这样可以达到楼主想要的结果，不管外面怎变变，图片和文字都是对齐的。
ps：如果要做两个元素绝对对齐，可以优先考虑display:table;(父级) display: table-cell;(子级)，这两个真可以算是最佳搭配，而且屡试不爽。vertical-align: middle;只在display:inline;（行内元素起作用）
直接上flex布局，用多了你会发现传统的写法没有一个能比得上弹性盒子来得爽。
除了上面说的各种方法外，我觉得最方便的还是干脆用个 字符图标 代替那个图片嘛。方便的很！
元素和元素之间不要出现空格。需要实现距离用margin。
一般都用背景和定位的方法。vertical-align不好控制，和字体也有关系。
inline-block的元素对齐都比较麻烦。所以如果条件允许，我会选择用flex居中。
<p class="box">
</p>
i,span{
}
使用一个p将图片与文字包裹起来，在p里对齐了就行