第一种

　　　　对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;

}

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

转载于:https://www.cnblogs.com/weibo806/p/5788040.html

图标和文字对齐的方法相关推荐

关于图标和文字对齐的方法整理。
关于图标和文字对齐的方法整理. 标签的图标修饰很常见.但是通常都会遇到小图标和文字对齐的若干问题.尤其是图标和文字字号不一致的时候,怎么对齐都觉得不自然. 当然我今天不讨论自不自然的问题. 网上关于这 ...
html css图标怎么跟文字并排,科技常识：css图标与文字对齐的两种实现方法
今天小编跟大家讲解下有关css图标与文字对齐的两种实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css图标与文字对齐的两种实现方法的相关资料,希望小伙伴们看了有所帮助. 在平时 ...
echarts legend 图例形状、图标与文字对齐
1.设置图例的图标形状,参考此文章 2.图标与文字对齐,参考此文章 legend: {icon: "roundRect",left: 'right',data: ['最高分','平 ...
图片和文字对齐的方法
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 方法一. 设置各对象的vertical-align属性,属性说明: base ...
css 图标和文字对齐 —— 垂直居中对齐，任意位置对齐
造成图标和文字排版困难的原因 1. 图标本身并不居中 2. 目标图标大小和文本大小/行高不匹配解决方案 1. 使用 "子绝父相" 的css定位方法,将图标设置为绝对定位,通过 l ...
html表单左侧文字对齐,CSS图标文字对齐和表单输入框文字对齐兼容
张鑫旭的一篇文章,讲到20像素图标对齐和表单元素40像素对齐有所收获,谢谢@张鑫旭 ,很多观点跟平时的处理方式不谋而合,一般来说,我处理图标如果临近的话都会使用同样宽高,然后使用inline-bloc ...
Word 里文字对齐推荐这4种方法
转自:微点阅读 https://www.weidianyuedu.com 59:40 发布 27651 收藏 7 分类专栏: 程序mp 文章标签: Word 版权程序mp 专栏收录该内容 97 ...
不必再狂按空格键了！Word 里文字对齐推荐这4种方法
我们在用Word写论文.制作简历的时候,通常会遇到把word中某些特定文字对齐的情况.那么问题来了,你平时都是怎么对齐文字的?傻傻的用空格来对齐吗? 在字符数不等的情况下,加空格不仅麻烦而且不准确,下 ...
Word 里文字对齐4种方法推荐
我们在用Word写论文.制作简历的时候,通常会遇到把word中某些特定文字对齐的情况.那么问题来了,你平时都是怎么对齐文字的?傻傻的用空格来对齐吗? 在字符数不等的情况下,加空格不仅麻烦而且不准确,下 ...

图标和文字对齐的方法

第一种

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

图标和文字对齐的方法相关推荐

最新文章

热门文章