图标和文字对齐的方法
熊孩纸
阅读：1172
2020-02-19 12:01:28
评论：0
在平时写页面的过程中，常遇到要把小图标与文字对齐的情况。比如：
总结了两种方法，代码量都比较少。
第一种
对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
;
}
|
原文地址：http://www.cnblogs.com/qjqcs/p/5303284.html
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
