出处:http://www.zhangxinxu.com/study/201603/icon-text-vertical-align.html

css

.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>

效果图1 小字号

  

2 大字号

  

css笔记——小图标文字对齐中级解决方案的更多相关文章

  1. 小图标文字对齐的终极解决方案demo

    CSS代码: .icon { display: inline-block; width:20px; height:20px; background: url(delete.png) no-repeat ...

  2. css控制图片与文字对齐

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明:baseline-将 ...

  3. css图标与文字对齐实现方法

    1.移动端(安卓设备.ios设备)图标文字垂直居中对齐的最佳常用解决方案是采用弹性盒子布局,可以快捷有效实现子元素未知高度绝对垂直居中对齐.PC端考虑到兼容性的问题,一般不推荐使用弹性盒子,依旧只能采 ...

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

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

  5. css:图标与文字对齐的两种方法

    (好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...

  6. CSS图标与文字对齐的两种方法

    在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src=&q ...

  7. CSS图标文字不对齐

    页面排版经常遇到‘图标+文字’的需求,正常样式写下来是这样 ​, 但产品要的应该是长这样 ​,怎么办呢?其实很简单,加个样式看看 vertical-align: top/middle/bottom; ...

  8. [CSS]复选框单选框与文字对齐问题的研究与解决.

    前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...

  9. DIV+CSS 让同一行的图片和文字对齐

    在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...

随机推荐

  1. cdoj 1255 斓少摘苹果 贪心

    斓少摘苹果 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1255 Descr ...

  2. HDU 5538 L - House Building 水题

    L - House Building Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.ph ...

  3. SpringMVC4.2.4 xml配置

    环境:1.基于spring4.2.4版本,也是spring当前(2016.2)最新的GA版本 2.maven 3.2.1 3.jdk1.7 xml配置1: web.xml <?xml versi ...

  4. Spring的DataSource配置、将Hibernate配置所有写到Spring配置

    DataSource能够集中管理数据库连接,降低维护工作量,使部署更简单: Spring的DataSource配置:(Spring数据源配置)这里使用dbcp,还有非常多其它的如c3p0,jdbc,j ...

  5. Sublime Text 备忘

    Sublime Text已经被传成编程利器,那当然也是我们前端的利器了,刚开始用的时候,很多小问题,所以做个备忘,忘记的时候也可以翻出来看看,下次重装的时候可以用到. 1.设置自动换行 菜单栏 Vie ...

  6. 设置EXCEL2010打开多个独立窗口

            最近发现一个奇怪的问题,发现office中的word和ppt在我使用笔记本分屏幕(双屏)的时候都可以将2份文档分别在2个窗口打开,但是在使用excel的时候却发现不行,最后研究发现原因 ...

  7. Oralce_语法

    Oracle内建数据类型 一. 字符数据 1. char(size) 2. varchar2(size) 最常用,最大长度4000字节 3. nvhar(size).nvarchar(size) 4. ...

  8. Spring 3.1 Environment Profiles--转载

    原文地址:http://gordondickens.com/wordpress/2012/06/12/spring-3-1-environment-profiles/ Profiles Spring ...

  9. centos、linux改变ll命令显示颜色

    服务器用的centOS,用putty管理时,在命令行下目录用蓝色显示,很难看清.可以用以下两种方法改变: 方法一: 1.直接修改个人帐户目录下的.color.rc文件. 找到 DIR 01;34,修改 ...

  10. Linux编程之《进程/线程绑定CPU》

    Intro----- 通常我们在编写服务器代码时,可以通过将当前进程绑定到固定的CPU核心或者线程绑定到固定的CPU核心来提高系统调度程序的效率来提高程序执行的效率,下面将完整代码贴上. /***** ...