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

春风如梦风过无痕,只为心的思念,遥寄一份浓浓的祝福。决不能习惯失败,因为你要知道,身体的疲惫,不是真正的疲惫;精神上的疲惫,才是真的劳累。

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

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

第一种    

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

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

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

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

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例