讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > html教程 > 正文

css笔记--小图标文字对齐中级解决方案_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:22:51
原创
1606人浏览过

出处：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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p style="color:gray;">--------下面是反例------</p><strong>设置了overflow:hidden</strong><p><i class="icon" style="overflow:hidden;"></i> 删除</p>
登录后复制

 

效果图1 小字号

吐司AI
吐司AI

超多功能的免费在线生图网站！拥有全网更齐全的模型库，0门槛使用！

吐司AI 325
查看详情 吐司AI

　　

 

2 大字号

 

　　

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：如何设置横向导航结构_html/css_WEB-ITnose 下一篇：深入理解CSS绝对定位_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
如何修改HTML后台管理界面_模板调整方法解析【方案】 可通过五种方法调整HTML后台管理界面模板：一、修改CSS样式文件；二、调整HTML结构嵌套；三、引入JavaScript动态控制；四、替换前端框架组件库；五、使用模板引擎变量注入机制。
2025-12-19 22:13:02
468
html5如何使用cursor_HTML5自定义鼠标光标样式【光标】 可通过CSScursor属性实现HTML5网页光标自定义：一、用pointer等内置关键字；二、用url()加载本地图片并设回退值；三、用Base64内联图像；四、用媒体查询适配高DPI屏幕；五、精确控制作用范围防继承污染。
2025-12-19 22:13:02
126
手机如何看网页html_在手机端查看网页HTML源代码【源码】 可通过四种方法查看手机网页HTML源代码：一、使用DuckDuckGo或Kiwi等支持源码查看的第三方浏览器；二、在Chromium内核浏览器中于URL前添加view-source:前缀；三、通过ChromeDevTools远程调试连接手机与电脑；四、提交URL至viewsource.io等在线服务解析。
2025-12-19 22:12:08
379
HTML如何放大图片不失真_自适应缩放方案解析【教程】 实现HTML图片放大不失真需采用高分辨率图源与响应式技术：一、用srcset/sizes匹配多尺寸图；二、CSS背景图配contain/cover；三、object-fit控制img内容适配；四、JS动态换高清图；五、图标类优先用SVG。
2025-12-19 22:11:02
446
如何设计html_设计美观的HTML页面布局【美观】 掌握语义化HTML、Flexbox、CSSGrid、响应式断点及统一视觉体系是实现美观网页布局的核心方法：一用语义标签构建清晰结构；二用Flexbox控制一维弹性布局；三用Grid实现二维模块化布局；四通过视口设置与媒体查询适配多端；五以限定色彩、HSL调色、字体阶梯和系统字体保障视觉一致性。
2025-12-19 22:11:02
253
html5如何实现画布_HTML5画布创建与绘图基础教程【画布实现】 需用HTML5动态绘图：先创建带id、宽高属性的canvas元素；再用JavaScript获取2D上下文；接着可绘制矩形、路径、文本、图像，并支持状态保存与恢复。
2025-12-19 22:07:45
408
HTML文字如何添加渐变色彩_CSS样式设计解析【教程】 可通过CSS渐变文本技术实现网页文字色彩过渡效果，主要方法有三：一、background-clip与text-fill-color组合；二、mask-image配合渐变背景；三、SVG内联定义渐变文字。
2025-12-19 22:07:02
454
.HTML文件如何打印输出_页面打印设置技巧【指南】 高质量HTML打印需四步：一、浏览器打印设置调边距为最小、关闭背景图形、缩放设100%；二、用@mediaprint隐藏导航栏等非必要元素并设分页；三、另存为PDF再打印以锁定排版；四、临时禁用JavaScript确保DOM静态完整。
2025-12-19 22:06:08
371
html如何翻页_实现HTML内容分页显示功能【分页】 实现HTML内容分页显示有四种方法：一、JavaScript手动分割DOM节点；二、CSSGrid配合JS隐藏/显示页块；三、使用Pagination.js插件；四、服务端分页+AJAX动态加载。
2025-12-19 22:05:07
621
HTML如何弹出提示框_JavaScript交互实现方法【指南】 JavaScript提供五种弹出提示框方法：alert()显示不可编辑警告；confirm()返回布尔值实现确认交互；prompt()获取用户文本输入；自定义DOM元素实现灵活样式；第三方库如SweetAlert2支持美观异步提示。
2025-12-19 21:57:27
241
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部