AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > css教程

css图标与文字对齐的两种实现方法

51自学网 http://www.wanshiok.com
css,图标,文字对齐

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

                                                                                             

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

第一种    

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

XML/HTML Code复制内容到剪贴板
  1. <div>    
  2.         <img src="" alt="" class="heart">    
  3.         <span>1169</span>    
  4.         <img src="" alt="" class="comment">    
  5.         <span>1168</span>    
  6. </div>    
XML/HTML Code复制内容到剪贴板
  1. div{    
  2.      height:30px;    
  3.      line-hight:30px;    
  4. }    
  5. .heart,.comment{    
  6.         vertical-align:middle;    
  7. }    

第二种

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

XML/HTML Code复制内容到剪贴板
  1. <div>    
  2.         <span class="heart">1169</span>    
  3.         <span class="comment">1168</span>    
  4. </div>    
JavaScript Code复制内容到剪贴板
  1. .hear{    
  2.         background:url(images/heart.png) left center no-repeat;    
  3.         margin-right:20px;    
  4. }    
  5. .comment{    
  6.         background:url(images/comment.png) left center no-repeat;    
  7. }    
  8. .hear,.comment{    
  9.         height:30px;    
  10.         line-height:30px;    
  11.         padding-left:20px;    
  12. }    

以上这篇css图标与文字对齐的两种实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持wanshiok.com。

原文地址:http://www.cnblogs.com/qjqcs/p/5303284.html


css,图标,文字对齐  
上一篇:CSS属性text-overflow的使用问题  下一篇:CSS基础知识之float详解