css:图标与文字对齐的两种方法
(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类)
在平时写页面的过程中,常遇到要把小图标与文字对齐的情况。比如:
总结了两种方法,代码量都比较少。
第一种
对img设置竖直方向对齐为middle,
1 2 3 4 5 6 | < div > < img src="" alt="" class="heart"> < span >1169</ span > < img src="" alt="" class="comment"> < span >1168</ span > </ div > |
1 2 3 4 5 6 7 | div{ height : 30px ; line-hight: 30px ; } .heart,.comment{ vertical-align : middle ; } |
第二种
把小图标设为背景图片,调整padding
1 2 3 4 | < div > < span class="heart">1169</ span > < span class="comment">1168</ span > </ div > |
1 2 3 4 5 6 7 8 9 10 11 12 | .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 ; } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步