.icon {
display: inline-block;
width:20px; height:20px;
background: url(delete.png) no-repeat center;
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';
}
HTML代码:
<strong>情形1,空标签</strong>
<p><i class="icon"></i> 删除</p>
<strong>情形2,内部有文字</strong>
<p><a href="javascript:" class="icon">删除</a> 后面的文字</p> <p style="color:gray;">--------下面是反例------</p> <strong>设置了overflow:hidden</strong>
<p><i class="icon" style="overflow:hidden;"></i> 删除</p>

css 文字与小图标对齐的更多相关文章

  1. CSS sprites(css 精灵):将小图标整合到一张图片上

    一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS backgr ...

  2. day3-3种实现小图标与文字水平对齐的方式

    效果图: 1.使用小图标作为背景图实现 html: <div class="test"> <ul> <li class="method1&q ...

  3. CSS之fontAwesome代替网页icon小图标

    引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...

  4. CSS Icon 项目地址 小图标-用css写成的

    http://cssicon.space/#/icon/focus 这是所有用css写成的  小图标  右侧有 html和css代码

  5. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  6. android Editview中加小图标或者文字实现

    关于这个问题,如果只是加小图标的话,已经提供了很好的支持,drawableLeft属性就可以设置左边的小图标,类推,右边也可以 不过如果你要加的是文字,我找了下,没有相应的属性,我们只能通过转换思路去 ...

  7. win10 系统右键菜单不显示文字(只有小图标)修复方法

    如下图,win10点击鼠标右键调出菜单时,看不到菜单的文字,只显示了小图标. 解决方法: Cortana 搜索 cmd ,看到 命令提示符,右键,选择 以管理员身份运行. 在命令提示符里输入以下命令, ...

  8. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  9. p标签text-align:justify以及CSS文字两端对齐

    p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...

随机推荐

  1. .net字符串Gzip压缩和base64string转换:

    class Program { static void Main(string[] args) { //要压缩的字符串 string data = "13800138000,验证码:1234 ...

  2. (转载)python2+selenium自动化测试系列(二)

    16.Selenium2+python自动化16-alert\confirm\prompt 17.Selenium2+python自动化17-JS处理滚动条 18.Selenium2+python自动 ...

  3. 第三章 centos安装git

    yum install git 安装后的默认存放地点/usr/bin/git

  4. oracle去掉重复记录语句

    oracle去掉重复记录语句   比如现在有一人员表 (表名:peosons) 若想将姓名.身份证号.住址这三个字段完全相同的记录查询出来 select p1.*   from persons  p1 ...

  5. 【译】RabbitMQ:工作队列(Work Queue)

    在第一篇我们写了两个程序通过一个命名的队列分别发送和接收消息.在这一篇,我们将创建一个工作队列在多个工作线程间分发耗时的工作任务. 工作队列的核心思想是避免立刻处理资源密集型任务导致必须等待其执行完成 ...

  6. asp.net web api添加自定义认证

    1.定义认证失败结果生成器 /// <summary> /// 认证失败结果生成器 /// </summary> public class AuthenticationFail ...

  7. 浅淡HTML5移动Web开发

    说实话,我们这次开发移动端的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发.但从这两种开发 ...

  8. xcode5.1+osx.10.9编译x264的问题

    最近忙于编译x264开源框架进行视频编码,百度了很多方法没有实现.很多方法都过时了.根本不能成功.因为在xcode5以后,编译器不在默认为gcc,而是Apple自带的clang编译器.本人试了很多方法 ...

  9. Flashback for MySQL 5.7

    实现原理 flashback的概念最早出现于Oracle数据库,用于快速恢复用户的误操作. flashback for MySQL用于恢复由DML语句引起的误操作,目前不支持DDL语句.例如下面的语句 ...

  10. sql报句柄无效。 (异常来自 HRESULT:0x80070006 (E_HANDLE))

    是由于数据库连接资源被耗尽或者用完没被释放导致的. 我在字符串中加了启用连接池好了. 如果错误信息为:sql 无效操作.连接被关闭 也是这个问题导致的.