图标和文字对齐的方法分析

熊孩纸 阅读:257 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

标签:CSS
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
关注我们

扫一扫关注我们,了解最新精彩内容