方法一: 使用 ex【推荐】 <template>无论字体多大,ex都能实现文字和图标对齐</template>.icon-arrow {display: inline-block;width: 20px;height: 1ex;background: url(https://demo.cssworld.cn/images/5/arrow.png) no-repeat center;} 方法二:使用 vertical-align的具体数值 缺点:字体大小改变需同步调整...
方法二:使用 vertical-align的百分比值 优点:无论字体多大都居中对齐 缺点:若 line-height 改变,vertical-align也许同步调整百分比值 原理: vertical-align: 25% 使文字中心线和图标的下边缘对齐,在通过相对定位的top,将图标向下偏移图标高度的一半 <template> 文字 </template> .icon-arrow{ background:url(https...
方法一: 使用 ex【推荐】 <template>无论字体多大,ex都能实现文字和图标对齐</template>.icon-arrow {display: inline-block;width: 20px;height: 1ex;background: url(https://demo.cssworld.cn/images/5/arrow.png) no-repeat center;} 方法二:使用 vertical-align的具体数值 缺点:字体大小改变需同步调整...