一直以来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. javascript检测属性

    javascript 对象可以看做属性的集合.我们可以通过三种方式来判断某个属性是否存在于某个对象中. 1.in操作符 var o={x:1} "x" in o //True :x ...

  2. solr4.0.0学习（二） 数据库导入clob与blob为索引

    导入clob很简单.但是blob好像没有提供方法,所以改了一下源码,重新编译替换class文件,竟然成功了. 先把配置文件贴上 SCHEMA.XML <?xml version="1. ...

  3. Java NIO使用及原理分析（二）

    在第一篇中,我们介绍了NIO中的两个核心对象:缓冲区和通道,在谈到缓冲区时,我们说缓冲区对象本质上是一个数组,但它其实是一个特殊的数组,缓冲区对象内置了一些机制,能够跟踪和记录缓冲区的状态变化情况,如 ...

  4. struts2环境搭建和第一个程序

    环境搭建 项目目录 导入依赖jar包,如上图lib目录所示. 不同的版本可能会不一样,没关系在tomcat启动时,如果报错java.lang.ClassNotFoundException,我们可以按照 ...

  5. 如何解决因为找不到Notepad++的安装路径而导致的不能更新CS-Script的问题

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何解决因为找不到Notepad++的安装路径而导致的不能更新CS-Script的问题.

  6. Hibernate中inverse属性与cascade属性

    Hibernate集合映射中,经常会使用到"inverse"和"cascade"这两个属性.对于我这样,Hibernate接触不深和语文水平够烂的种种因素,发现 ...

  7. LabSharp莱博夏普简介

    莱博夏普提供实验室信息化解决方案,为实验室提供LIMS系统建设方案咨询,并为中小型LIMS系统供应商提供系统解决方案咨询.

  8. Javascript——初步

    1.基本概念 Javascript是一门脚本语言,它是一门解释性的语言.网页和用户之间实时.动态的进行交互. 2.特点 简单性:没有严格的数据类型.语句简单而紧凑. 安全性:仅仅能通过浏览器实现浏览和 ...

  9. MP算法和OMP算法及其思想

    主要介绍MP(Matching Pursuits)算法和OMP(Orthogonal Matching Pursuit)算法[1],这两个算法尽管在90年代初就提出来了,但作为经典的算法,国内文献(可 ...

  10. oracle14 复杂数据类型

    复合类型-pl/sql表类型 相当于高级语言中的数组,但是需要注意的是在高级语言中数组的下标不能为负数,而pl/sql是可以为负数的,并且表元素的下标没有限制.实例如下: Sql代码 .declare ...