css:图标与文字对齐的两种方法
2016-03-21 19:16
381 查看
(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类)
在平时写页面的过程中,常遇到要把小图标与文字对齐的情况。比如:
总结了两种方法,代码量都比较少。
第二种
把小图标设为背景图片,调整padding
在平时写页面的过程中,常遇到要把小图标与文字对齐的情况。比如:
总结了两种方法,代码量都比较少。
第一种
对img设置竖直方向对齐为middle,
<div> <img src="" alt="" class="heart"> <span>1169</span> <img src="" alt="" class="comment"> <span>1168</span> </div>
div{ height:30px; line-hight:30px; } .heart,.comment{ vertical-align:middle; }
第二种
把小图标设为背景图片,调整padding
<div> <span class="heart">1169</span> <span class="comment">1168</span> </div>
.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; }
相关文章推荐
- CSS2系列:外边距合并问题(margincollapse)
- CSS控制LI行字符溢出用省略号取代
- CSS中隐藏内容的3种方法及属性值
- CSS总结(七)——常见的两栏、三栏布局
- CSS总结(六)——元素的垂直居中(已知高度/未知高度)
- css选择器
- CSS总结(五)——定位 position
- CSS :before 和 :after
- CSS总结(四)—— CSS选择器优先级
- css,js实现在鼠标移动到一个位置在这个位置下面显示一个已经存在的div,这个div的位置随意
- CSS3实现翻转(Flip)效果
- CSS总结(三)—— 盒子模型(标准/IE下)
- Html+CSS transform属性中的 translate属性值
- Css3之基础-3 Css 尺寸单位、尺寸属性与边框属性
- css常用选择器
- Html+CSS transform属性中的 rotate 属性值
- CSS总结(二)—— 浮动 与 清除浮动
- Css3之基础-2 Css 基础选择器
- Html+CSS CSS3 Keyframe+Animation属性 CSS动画
- CSS3 选择器 属性选择器介绍