一直以来icon和文本需要对齐都使用vertical-align: middle;的方法，但兼容性不理想。参考了鑫旭大大的博客，终于收获不用vertical-align可以对齐的神技，原博点这里。
代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>icon对齐神技</title> <style type="text/css"> a { text-decoration: none; color: #333; } /*全局统一lineheight,与icon高度一致*/ body { font-size: 14px; line-height: 20px; } .icon { display: inline-block; background: url('toplist.png') no-repeat 2px -139px; width: 20px; height: 20px; white-space:nowrap; /*设置文本不换行，防止溢出的文字破环格局*/ letter-spacing: -1em; text-indent: -99em; /*首行缩进设置负值，使得标签内的文字不显示*/ color: transparent; /* IE7 */ *text-indent: 0; *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\3000'); } .icon:before { content: '\3000'; } </style></head><body> <p style="color:blue;">使用空标签i</p> <a href="#"><i class="icon"></i>某些东西</a> <p style="color:blue;">使用a标签，标签内有文字</p> <p ><a href="#" class="icon">某些东西</a>某些东西</p></body></html>
Comment trouver l'emplacement d'un téléphone Huawei perdu
logiciel
La différence entre vivox100s et x100
collection de codes d'arrière-plan CSS
Comment démarrer la surveillance des données Oracle
Comment résoudre l'erreur de restauration du site Web
Plateforme nationale d'achat et de vente de Bitcoin
Comment masquer les extensions de fichiers
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
