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

如何实现css图标与文字对齐

不言
发布： 2018-06-09 16:28:24
原创
3462人浏览过

下面为大家带来一篇css图标与文字对齐的两种实现方法。内容挺不错的，现在就分享给大家，也给的大家做个参考。

在平时写页面的过程中，常遇到要把小图标与文字对齐的情况。比如：

                                                                                             

总结了两种方法，代码量都比较少。

第一种　　　　

立即学习“前端免费学习笔记（深入）”；

对img设置竖直方向对齐为middle，

XML/HTML 

<p>
        <img src="" alt="" class="heart">
        <span>1169</span>
        <img src="" alt="" class="comment">
        <span>1168</span>
</p>
登录后复制

XML/HTML 

标书对比王
标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

标书对比王58
查看详情 标书对比王 
p{    
     height:30px;    
     line-hight:30px;    
}    
.heart,.comment{    
        vertical-align:middle;    
}
登录后复制

第二种

把小图标设为背景图片，调整padding

XML/HTML 

<p>
        <span class="heart">1169</span>
        <span class="comment">1168</span>
</p>
登录后复制

JavaScript

.hear{    
        background:url(images/heart.png) left center no-repeat;    
        margin-right:20px;    
}    
.comment{    
        background:url(images/comment.png) left center no-repeat;    
}    
.hear,.comment{    
        height:30px;    
        line-height:30px;    
        padding-left:20px;    
}
登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何利用CSS去掉select的下拉箭头

以上就是如何实现css图标与文字对齐的详细内容，更多请关注php中文网其它相关文章！

相关标签：
css php JavaScript css html select xml

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：如何利用CSS去掉select的下拉箭头 下一篇：CSS实现单行、多行文本溢出显示省略号的实现方法
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在css中class选择器与id选择器区别 class选择器以点号开头，可多元素复用，权重为10；id选择器以井号开头，页面唯一，权重为100，优先级更高，常用于唯一结构与JS快速获取。
2025-11-02 02:59:33
276
如何用CSS实现自适应图片_CSS object-fit属性与布局技巧 使用object-fit:cover可让图片保持比例并填满容器，结合padding-bottom实现固定比例容器，通过绝对定位使图片居中裁剪；兼容性不足时可用background-size:cover或picture标签配合srcset实现响应式与art-direction，提升自适应显示效果。
2025-11-02 00:21:14
166
浮动元素内嵌表单控件如何对齐_CSS布局优化方法 统一表单控件盒模型与尺寸，设置box-sizing:border-box、固定height或line-height，修复vertical-align对齐问题，推荐用flex替代float实现布局。
2025-11-01 23:41:01
937
如何用css实现响应式多列卡片等高 使用Flexbox或Grid可实现响应式等高卡片布局。1.Flexbox通过display:flex和flex:11300px使子项自动等高并适配屏幕；2.Grid利用grid-template-columns:repeat(auto-fit,minmax(300px,1fr))创建自适应网格，结合gap控制间距；3.为保持按钮对齐底部，给.card设flex-direction:column，.card-content用flex:1，.card-button加margin-top:auto；4
2025-11-01 23:39:22
144
怎样用CSS制作简单的登录页面_CSS表单样式与布局练习 登录页面采用HTML表单与CSS美化，结构清晰。通过Flexbox实现居中布局，表单包含用户名密码输入框、登录按钮及辅助链接，使用响应式设计适配不同屏幕，输入框和按钮添加悬停与聚焦效果，整体简洁美观且用户体验良好。
2025-11-01 23:34:02
724
在css框架中快速调整布局和间距 掌握CSS框架的实用类可快速调整布局与间距。1.使用m/p加方向和数值缩写（如mt-4、px-6）设置外边距和内边距；2.通过flex、justify-center、items-center等Flexbox类实现弹性布局，gap-4统一子元素间距；3.利用grid、grid-cols-3、col-span-2等Grid类创建多列网格并控制跨列；4.添加响应式前缀（如md:、lg:）实现不同屏幕下的间距与显示控制（如md:block），无需自定义CSS即可高效完成布局。
2025-11-01 23:33:02
370
如何在CSS中实现顶部固定导航布局_position sticky与Flex结合 使用position:sticky与Flexbox可创建固定导航栏，sticky使导航在滚动时吸附顶部，需设置top和z-index；Flexbox通过display:flex实现内容对齐与响应式布局，配合justify-content与align-items控制间距和垂直居中，结构清晰且无需JavaScript，注意避免父容器overflow:hidden影响粘性效果。
2025-11-01 23:31:02
985
如何使用CSS实现背景图片平滑切换_background-image与过渡结合 答案：CSS中background-image不支持直接过渡，但可通过分层和opacity实现视觉平滑切换。1.使用双层结构配合opacity过渡实现淡入淡出；2.利用伪元素减少HTML标签，保持结构简洁；3.结合JavaScript控制类切换，适用于交互场景；4.注意图片预加载、性能优化及内存管理，确保流畅体验。
2025-11-01 23:08:02
200
如何在CSS中使用Flex实现头部导航居中_Flex布局优化 使用Flex布局可高效实现头部导航居中。1.基础居中：父容器设display:flex，justify-content:center实现水平居中，align-items:center实现垂直居中；2.含Logo的居中：通过justify-content:space-between分配左右空间，中间导航菜单设置margin:0auto自动居中；3.响应式优化：结合媒体查询，在小屏幕使用flex-direction:column和flex-wrap适应移动设备，提升用户体验。
2025-11-01 23:07:14
762
CSS布局中float清除浮动方法有哪些_clearfix技巧解析 清除浮动的方法包括：使用clear属性、设父元素固定高度、触发BFC或使用clearfix技巧；其中推荐通过display:flow-root或伪元素clearfix类来实现，既保持结构语义化又有效包含浮动元素。
2025-11-01 23:06:02
519
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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

  • PHP学习

  • 技术支持

  • 返回顶部