小icon与后面文字对齐

由于vertical-align属性的兼容性，以及vertical-align:middle并不是严格意义的垂直居中，因此，小图标+文字的对齐，基本上都要针对不同浏览器加个hack补丁；在加上，如果你的图标尺寸一会儿16像素，一会儿18像素，显然，没法通过全局一个设置使得整站的小图标和文字都对齐良好！

我们要想20像素高的图标和20像素高的文字天然对齐显示，需要满足这两个条件：

1. overflow属性值除了visible都不行；
2. 里面需要有不加修饰的文本内容；

所以，下面两种情况都是淘汰的！

.icon {
    display: inline-block;
    width: 20px; height: 20px;
    background: ...
    overflow: hidden;     
}

<i class="icon"></i>     

.icon {
    display: inline-block;
    width: 20px; height: 20px;
    background: ...
}

第一种情况是overflow:hidden拖后腿了；第二种情况是<i>标签里面是空大屁，基线还是元素底边缘而不是里面的文字（如果有）。

.icon { 
    display: inline-block; 
    width:20px; height:20px; 
    background: ...; 
    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'; 
}

转载自：张旭鑫的http://www.zhangxinxu.com/wordpress/?p=5264

最后

以上就是外向小蚂蚁为你收集整理的小icon与后面文字对齐的全部内容，希望文章能够帮你解决小icon与后面文字对齐所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。