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

使用css sprites怎么才能使图标与文字垂直居中显示_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:11:57
原创
1508人浏览过

在写一个博客界面
本来用不用css sprites都没什么问题 小网站嘛
不过没用过sprites 今天就写了一下
但是之前没使用sprites 直接插入图标图片和文字之后 用height与line-height同样高度就可以垂直居中
用了sprites之后因为插入的是背景 垂直居中就不好控制了
不知道大家有什么好的方法 推荐一下

慧中标AI标书
慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

慧中标AI标书 120
查看详情 慧中标AI标书

回复讨论(解决方案)

楼主?的容器垂直居中
还是 
background:url(...) center;
这样?

HTML：

Blog Search


CSS：
.iconA {display:inline-block; height:16px; width:16px; background:url(icons.png) -20px -20px no-repeat}

可以让图标和文字显示在同一行 图标不会偏上一点

iconA
加上
vertical-align:middle;
试试

解决了
vertical-align:middle;还是会错位一点
用margin-bottom 给一个负值调整一下就OK了
谢了

大家都在看：

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

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

下载
来源：php中文网
收藏 点赞
上一篇：如何让li里的图片垂直居中 下一篇：html中如何给框架添加背景图_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
深入理解CSS浮动清除：clear: both的应用与实践 本文深入探讨了CSS浮动布局中clear属性的正确使用，特别是在同时应用float:left和float:right后如何清除浮动。文章详细解释了clear:left、clear:right和clear:both的区别与适用场景，强调了clear:both作为最通用且稳健的清除浮动方案，以确保后续元素正确布局，避免因浮动导致的布局混乱。
2025-11-10 09:51:23
702
响应式图片焦点控制：利用CSS媒体查询优化移动端视觉体验 在移动设备上，图片经常因缩放而导致焦点偏离，影响用户体验。本文将详细介绍如何利用CSS的object-fit和object-position属性，结合媒体查询（MediaQueries），精确控制图片在不同屏幕尺寸下的显示区域和焦点位置，从而无需为移动端准备单独图片，实现图片内容的智能适配和优化。
2025-11-10 09:39:12
564
React Native中SVG Path元素正确缩放以适应ViewBox的教程 本文深入探讨了在ReactNative中使用react-native-svg时，如何确保SVG内部的path元素能够正确缩放以适应其viewBox。核心在于理解viewBox应定义SVG内容的固有坐标系统，通常为固定值，而非动态随组件宽高变化。通过固定viewBox并结合width、height属性，可以实现SVG内容的预期缩放行为。
2025-11-10 09:38:34
550
Discord用户头像链接的动态获取与持久性挑战 本文探讨了Discord用户头像链接的持久性问题。由于Discord为上传图片生成随机URL，直接获取一个“始终更新且链接不变”的用户头像链接是不可行的。唯一可靠的方法是通过DiscordAPI动态获取用户的最新头像URL，并利用其用户ID作为稳定标识符。
2025-11-10 09:38:21
766
在HTA中利用VBScript动态控制图片位置的教程 本文详细介绍了如何在HTML应用程序（HTA）中，通过VBScript脚本语言动态地控制页面上图片的位置。我们将探讨如何利用VBScript访问HTML元素的DOM属性，结合用户输入实时更新图片的top和left样式，从而实现无需按钮即可响应式调整图片位置的功能。教程将提供完整的代码示例和详细解释，帮助开发者理解HTA环境下VBScript与HTML交互的关键机制。
2025-11-10 09:35:11
320
Spring Boot项目中CSS背景图片路径的正确设置与常见问题解析 本文旨在解决SpringBoot应用中CSS背景图片无法正确加载的问题。当内联样式或background-color生效，而background-image失效时，核心原因通常是CSS文件中图片相对路径的引用不当。文章将详细阐述如何根据项目文件结构正确设置CSS中的图片路径，并提供示例代码和调试建议，确保背景图片能顺利显示。
2025-11-10 09:24:32
659
使用CSS动画为HTML元素创建震动效果教程 本教程详细讲解如何利用CSS的@keyframes规则和animation属性，为HTML元素实现逼真的震动视觉效果。文章将涵盖动画定义、属性配置、以及通过JavaScript动态触发动画的方法，并提供完整的示例代码和注意事项，帮助开发者轻松为网页增添交互性。
2025-11-10 09:24:18
170
解决Flexbox中文本溢出省略号导致元素位移的策略 本文旨在解决Flexbox布局中，当子元素设置flex:110并结合overflow:hidden和text-overflow:ellipsis实现文本溢出省略时，相邻元素可能出现意外位移的问题。我们将深入探讨此现象的根源，并提供通过添加width:0或min-width:0来有效防止这种位移的解决方案，确保布局的稳定性和预期行为。
2025-11-10 09:21:17
657
JavaScript函数如何优雅地接收并处理不同对象参数 本文深入探讨了在JavaScript中，如何利用对象解构赋值的特性，使同一个函数能够灵活地接收并处理结构相似但来源不同的对象参数。通过示例代码，我们展示了这种方法如何提升代码的复用性、可读性和维护性，避免了在函数内部进行繁琐的属性名修改，从而构建出更健壮、更具适应性的函数。
2025-11-10 09:16:01
129
Flask应用中HTML文本渲染的最佳实践与常见问题解决 在FlaskWeb应用中，直接将文本内容放置于HTML标签内可能导致显示异常或不符合最佳实践。本教程将深入探讨这一常见问题，解释为何应避免此做法，并提供使用或等语义化标签包装文本的标准解决方案，确保内容在浏览器中正确、可靠地呈现，同时提升代码的可维护性和兼容性。
2025-11-10 08:49:01
364
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部