一直以来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. Raspberry Pi Kernel Compilation 内核编译官方文档

    elinux.org/Raspberry_Pi_Kernel_Compilation#Use_the_provided_compiler Software & Distributions: S ...

  2. MongoDB库设计原则及实践

    MongoDB数据模型选择• CAP定理(Consistency ,Availability 和Partition Tolerance )– Consistency(一致性):数据一致更新,所有数据变 ...

  3. Maven浅析-3 Ant Vs Maven

    1.什么是Ant? Ant起源是为了取代构建工具Make.它可以跨系统,建立在Java和XML的基础上,而且非常程式化. Ant更像一个脚本工具,我们必须在Ant内显示地声明做任何事情.在<ta ...

  4. 简单了解View是What?

    Android UI界面架构 每个Activity包含一个PhoneWindow对象,PhoneWindow设置DecorView为应用窗口的根视图.在里面就是熟悉的TitleView和Content ...

  5. 20169210《Linux内核原理与分析》课程总结

    每周作业链接汇总 第一周作业:对实验楼<Linux 基础入门(新版)>课程的学习,其中有用户及文件权限管理.Linux 目录结构及文件基本操作.环境变量与文件查找.文件打包与解压缩等共17 ...

  6. DateTime.TryParseExact 万能时间格式转化

    本文转载:http://blog.csdn.net/gaofang2009/article/details/6073231 前天同事问C#有没有相关的方法能把"年月日时分秒"这样的 ...

  7. inux下网络发包工具 Tcpreplay3.x。

    第1章.     说明 本文档只适用于Tcpreplay3.x. 第2章.     Tcpreplay系列工具 2.1. 概述 首先推荐一个网站:http://tcpreplay.synfin.net ...

  8. Keepalived+Nginx+Tomcat配置高可用负载均衡系统示例

    前言 此示例为keepalived+nginx+tomcat的基础配置示例,某些特定配置此例中不会出现,在示例中会用到三个虚拟机:两个纯命令行用于模拟服务端配置,一个带桌面环境的用于模拟客户端访问,这 ...

  9. expect批量分发公钥

    sshkey.exp #!/usr/bin/expect# 由于是多台服务器,需要在shell脚本中循环调用该脚本 if { $argc != 2 } { send_user "usage: ...

  10. XC文件管理器（Android应用）

    XC文件管理器,是基于Android4.4开发的一个方便易用的文件管理器,具有文件的目录管理和文件的管理,主要包括文件的新建.删除.重命名.复制,移动剪切以及文件详情查看等文件和目录的功能,同时支持文 ...