一直以来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. 发送带有认证信息的HTTP请求并取回响应

    问题 如何发送 一个带有网络认证证书的HTTP请求并返回相应的HTTP响应. 设计 创建一个WebRequest对象和一个NetWorkCredential对象.把NetWorkCredential对 ...

  2. Eclipse编译ijkplayer

    参考链接:http://blog.csdn.net/fatiao101/article/details/49586379

  3. poj 2828 Buy Tickets【线段树单点更新】【逆序输入】

    Buy Tickets Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 16273   Accepted: 8098 Desc ...

  4. 激活Navicat？如何注册Navicat？

    在注册界面里面输入信息 名:顺便输入 组织:顺便输入 注册码:NAVH-WK6A-DMVK-DKW3

  5. PHP学习笔记-00

    PHP这门语言的就不用多说啦,使用率非常高的一门后端开发语言.之前一直希望可以学习了解一下PHP.之前主要在做Java和OC这类语言的开发,对于PHP这种脚本语言(动态语言)还是了解甚少. 近期看了一 ...

  6. java消息队列使用场景

    http://blog.163.com/sir_876/blog/static/11705223201332444647261/ 目前能用到的比较不错的消息队列组件 ,kafka,activeMq, ...

  7. 直接通过浏览器打开Android App 应用

    点击浏览器中的URL链接,启动特定的App. 首先做成HTML的页面,页面内容格式例如以下: <a href="[scheme]://[host]/[path]?[query]&quo ...

  8. 用tsung测试openfire 服务器性能

    最近公司需要做一个有聊天功能的应用,客户讲的是很宏大,用户超多,以前搞过openfire,但没有深入的去了解,就想用它来搞,而且是用 java写的,想扩展也容易些,但在性能上一直担忧,想测试一下它的性 ...

  9. How and Why Unsafe is Used in Java---reference

    By Peter Lawrey https://www.voxxed.com/blog/2014/12/how-and-why-unsafe-is-used-in-java/ Overview sun ...

  10. [转] Tomcat 配置 SSL

    PS: keystore有自己的访问密码,这个保护层次要低一些,然后keystore里面存有自己的私钥,所以用户要破解的话,既要有keystore,又要有keystore的密码,p12是客户端keys ...