一直以来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. 你需要知道的10位Java开发牛人

    1.James Gosling 1983 年,Gosling 获得了加州大学的计算机科学学士学位.1990 年,他获得了卡内基梅隆大学的计算机科学博士学位,师从 BobSproull.在攻读博士期间, ...

  2. 进程与线程（四） linux进程间通信的方式总结

    1概述: 上文说到,每个进程都有自己的地址空间,包括什么呢?向下生长得栈,向上生长的堆,代码段,数据段等,这些都是进程私有的,如何实现通信的呢?通信需要媒介,这个媒介很重要. 对于研发人员来说,进程不 ...

  3. [ZETCODE]wxWidgets教程九：组件专题2

    本教程原文链接:http://zetcode.com/gui/wxwidgets/widgetsII/ 翻译:瓶哥 日期:2013年12月15日星期日 邮箱:414236069@qq.com 主页:h ...

  4. mao/reduce实现求平均值

    import java.io.*; import java.util.*; import org.apache.hadoop.fs.Path; import org.apache.hadoop.io. ...

  5. openstack 调试

  6. linux 下信号处理命令trap && linux下各种信号的意义

    1.用途说明 trap是一个shell内建命令,它用来在脚本中指定信号如何处理.比如,按Ctrl+C会使脚本终止执行,实际上系统发送了SIGINT信号给脚本进程,SIGINT信号的默认处理方式就是退出 ...

  7. WPF ArrangeOverride与MeasureOverride

    1.MeasureOverride  是FrameworkElement.MeasureOverride 方法 当重写在派生类中,单位是对于子元素所需要布局的大小并确定FrameworkElement ...

  8. 《Linux内核设计与实现》学习笔记之“Linux进程管理机制”

    一.进程(或者称为“任务”)简介 进程是OS最基本的抽象之一,通常进程包括“可执行程序代码”,“其他资源”(如:打开的文件,挂起的信号,内核内部数据,处理器状态,地址空间,一个或多个执行线程等) 二. ...

  9. GitHub与Versions

    [第一步]建立先仓库 第一步的话看一般的提示就知道了,在github新建一个repository(谷歌可以解决),都是可视化的界面操作,所以难度不大.或者看这里:https://help.github ...

  10. PropertyGrid仿VS的属性事件窗口

    效果图:. 首先我们去重写一下PropertyGrid: internal class MyPropertyGrid : System.Windows.Forms.PropertyGrid { pri ...