一直以来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>

网页icon和文本对齐神技 2016.03.23的更多相关文章

  1. JS实现回到页面顶部动画效果 2016.03.23

    最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...

  2. Windows上的的神技

    Windows上的的神技 不用借助任何第三方软件,其实Windows也大有可为——比你目前了解得至少要多得多,强大技能快来get起来! 1.文件隐藏谁的电脑里没点小秘密?东藏西藏到最后自己都找不到了有 ...

  3. 第 3 章 HTML5 网页中的文本和图像

    文字和图像是网页中最主要.最常用的元素. 在互联网高速发展的今天,网站已经成为一个展示与宣传自我的通信工具(公司或个人可以通过网站介绍公司的服务与产品或介绍自己).这些都离不开网站中的网页,而网页的内 ...

  4. 利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)

    利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技) 前言 为什么会出现跨域? 造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不 ...

  5. Linux C++ 调试神技--如何将Linux C++ 可执行文件逆向工程到Intel格式汇编

    Linux C++ 调试神技--如何将Linux C++ 可执行文件逆向工程到Intel格式汇编 对于许多在windows 上调试代码的人而言, Intel IA32格式的汇编代码可能并不陌生,因为种 ...

  6. Bootstrap系列 -- 5. 文本对齐方式

    一. 文本对齐样式 .text-left:左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐 二. 使用方式 <p class=&q ...

  7. Bootstrap学习笔记之文本对齐风格

    文本对齐风格 在排版中离不开文本的对齐方式.在CSS中常常使用text-align来实现文本的对齐风格的设置.其中主要有四种风格: ☑  左对齐,取值left ☑  居中对齐,取值center ☑   ...

  8. ckeditor文本对齐方式添加，图片上传

    最近用的AdminBSBMaterialDesign-master模板,里边用到了ckeditor编辑器 但发现里边没有基本的文本对齐方式,找了好一会,好多方法都不管用,最后在config.js中添加 ...

  9. bootstrap 文本对齐风格

    Bootstrap通过定义四个类名来控制文本的对齐风格: ☑   .text-left:左对齐 ☑   .text-center:居中对齐 ☑   .text-right:右对齐 ☑   .text- ...

随机推荐

  1. scp 在不同主机之间数据传输

    不同的Linux之间copy文件常用有3种方法,第一种就是ftp,也就是其中一台Linux安装ftp Server,这样可以另外一台使用ftp的client程序来进行文件的copy.第二种方法就是采用 ...

  2. 搭建Git远程仓库（也就是Git服务器，不用再连Github了）

    github上一般托管的代码都是公开的,任何人都可以查看.复制下载等,而私有的项目则需要付费.所以可以自己搭建一个git服务,自己人用. 首先安装git: sudo apt-get install g ...

  3. 荷兰国旗问题 划分成3部分 leecode

    public class Solution { public void sortColors(int[] A) { int len=A.length; int beg=0; int end=len-1 ...

  4. bzoj 2618 2618: [Cqoi2006]凸多边形（半平面交）

    2618: [Cqoi2006]凸多边形 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 656  Solved: 340[Submit][Status] ...

  5. vijosP1037搭建双塔

    vijosP1037搭建双塔 链接:https://vijos.org/p/1037 [思路] DP. [代码] #include<iostream> #include<cstrin ...

  6. JavaScript高级程序设计30.pdf

    第12章 DOM2和DOM3 DOM1级主要定义的是HTML和XML文档的底层结构.DOM2和DOM3则在这个结构的基础上引入了更多的交互能力,也支持更高级的XML特性 DOM2和DOM3级分为许多模 ...

  7. MD5算法原理

    //消息摘要:将任意长度的字符数组处理成定长的字符数组,用于确保原字符串不被修改, //也可以用做密码确认,如果密码一致,则MD5产生后的值必然一致,否则不相同 public class DataUt ...

  8. Bzoj 1579: [Usaco2009 Feb]Revamping Trails 道路升级 dijkstra,堆,分层图

    1579: [Usaco2009 Feb]Revamping Trails 道路升级 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1573  Solv ...

  9. Android TextView : “Do not concatenate text displayed with setText”

    参考:http://stackoverflow.com/questions/33164886/android-textview-do-not-concatenate-text-displayed-wi ...

  10. Ubuntu 如何使用apt命令安装、升级、卸载软件

    apt-get是一条linux命令,适用于deb包管理式的操作系统,主要用于自动从互联网的软件仓库中搜索.安装.升级.卸载软件或操作系统. apt-get命令一般需要root权限执行,所以一般跟着su ...