html图标与文字对齐,如何实现css图标与文字对齐

下面为大家带来一篇css图标与文字对齐的两种实现方法。内容挺不错的，现在就分享给大家，也给的大家做个参考。

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

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

第一种

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

XML/HTML

1169

1168

XML/HTMLp{

height:30px;

line-hight:30px;

}

.heart,.comment{

vertical-align:middle;

}

第二种

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

XML/HTML

1169

1168

JavaScript.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;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

html图标与文字对齐,如何实现css图标与文字对齐相关推荐

html语言两端对齐咋写,CSS如何实现文字两端对齐效果？
两端对齐在导航nav的制作中非常常用,那么如何实现两端对齐效果?下面本篇文章就来给大家介绍一下使用CSS实现文字两端对齐效果的方法,希望对大家有所帮助. 想要实现文字两端对齐效果,可以使用CSS的te ...
css+文字排在底部,css怎么让文字居于div的底部
css怎么让文字居于div的底部发布时间:2020-11-30 11:02:25 来源:亿速云阅读:84 作者:小新小编给大家分享一下css怎么让文字居于div的底部,相信大部分人都还不怎么了解 ...
html同一段文字设置不同颜色字体,CSS设置一个文字两种颜色
CSS设置一个文字两种颜色属于前端实例代码,有关更多实例代码大家可以查看. CSS可以将一个文字设置为两种颜色,下面介绍一下如何实现此效果. 代码实例如下: 犀牛前端部落 .antzone{ disp ...
php如何水平对齐所有星星,css怎么设置水平对齐
css设置水平对齐的方法:1.使用"text-align: center;"样式设置文本元素水平居中对齐:2.使用"margin: auto;"样式设置块状元素 ...
html中文字描边效果代码,css如何设置文字描边效果？
想要使用CSS给文字添加描边效果,主要有两种方法:使用text-stroke属性或text-shadow属性. 方法1:使用text-shadow属性 text-shadow属性用于向文本添加字体边框 ...
android 系统图标_9个非常实用的CSS图标库
以前网页上显示图标都是用切成小图片,然后根据不同场景作多个小图,通过js来控制显示效果.字图图标,顾名思义,就像使用通常的字体,可以设置字体颜色,大小等,不用在搞多张小图片,非常灵活.其优点: 轻松的 ...
css怎么将文字底下设置颜色,css如何设置文字颜色
css设置文字颜色的方法:1.在DIV标签内使用color颜色样式,代码为[ www.php.cn ]:2.在CSS选择器中使用color颜色样式CSS代码. 本教程操作环境:windows7系统.c ...
html表单左侧文字对齐,CSS图标文字对齐和表单输入框文字对齐兼容
张鑫旭的一篇文章,讲到20像素图标对齐和表单元素40像素对齐有所收获,谢谢@张鑫旭 ,很多观点跟平时的处理方式不谋而合,一般来说,我处理图标如果临近的话都会使用同样宽高,然后使用inline-bloc ...
html css图标怎么跟文字并排,科技常识：css图标与文字对齐的两种实现方法
今天小编跟大家讲解下有关css图标与文字对齐的两种实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css图标与文字对齐的两种实现方法的相关资料,希望小伙伴们看了有所帮助. 在平时 ...
css 多行文字左对齐,纯CSS实现文字一行居中，多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...

html图标与文字对齐,如何实现css图标与文字对齐

html图标与文字对齐,如何实现css图标与文字对齐相关推荐

最新文章

热门文章