一般直接使用小图标<img/>再加文本，都会出现小图标与文本不能对齐的情况。
如果，小图标和文本在同一div中，解决方法：
1、可以设置小图标vertical-align:middle;
2、设置div样式：background:url() no-repeat left center;(后面两个元素可以根据自己需要调。)
如果小图标和文本在同一A标记中，可以在A标记中加个div，方式同上。
时间： 2024-10-12 00:45:29
小图标与文本不能对齐的情况
小图标与文本不能对齐的情况的相关文章
移动端实现 iphone android 小图标 文字排版
情景描述: 在手机浏览器中展示一些数据,这些数据前面都小图标,要求:小图标和文字水平对齐. 效果图 问题分析: 对于图文横排的问题,有很多的解决办法,但是究其根本还是将图片和文字放在同一行上进行展示. 实现方案: 方案一: 写法上很简单,但是这个的兼容性有很大问题. .m-icon{ display:inline-block; vertical-align:middle; padding-right:1em; height:1em; background-image:url(icon.png)
小图标和文字的居中对齐-小总结
小图标和文字的居中对齐问题,相信大家在很多时候会遇到.今天楼主从其他大神那边扒了一些方法,现在做个小小的总结. 说明:本次用到的小图标来自阿里巴巴矢量图,大家可以去找一下(地址:http://www.iconfont.cn/plus/collections/detail?cid=3223)我的图标尺寸是20px*20px 第一种办法:vertical-align和line-height结合 特点:这种办法只适用于放置小图标和文字的标签的display属性都是inline的情况. 效果图: 代码如
总结几个小图标实现方法
前言:页面总是时不时会出现小图标,就来总结一些自己知道的实现方法,应用情况依靠场景大家自行参考吧. (一)雪碧图 CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 特点:相对于单个小图标,它节省了文件体积和服务请求次数.主要是因为将所有的零碎的小图片整合在一起,可以有效的减少http对图片的请求次数,不需要多次加载零碎的背景图片,所以合理的利用它可以有效的提高网页的加
列表前显示的小图标
列表信息展示有时候会在每行前使用小图标来美化,布局通常也会用到ul li: 1.如果是1张小图标 一般会用background属性来显示图标,background-image:url(); background-repeat: no-repeat; background-position:left center; 另外还可以使用list-style,该属性按顺序有3个值:list-style-type, list-style-position, list-style-image list-sty
在网页中画Icon小图标
在网页中画Icon小图标. 现代网页中,绝大部分都采用了Icon小图标的方式.其积分大致分为三类,CSS Sprite,font+HTML,font+CSS. CSS Sprite:又称为CSS雪碧,把网页中零星背景图片整合在一张图片文件夹中,再利用CSS的背景图片技术定位到要显示的位置.优点:减少文本体积和服务器请求次数,从而提高效率. 知识点:background-image background-position(向下向右取的是负值). 特点:1,相对单个图标,节省文本体积和服务器请求次数
不同浏览器下兼容文本两端对齐
在form表单的前端布局中,我们经常需要将文本框的提示文本两端对齐,例如: 比较粗暴的做法是在需要隔离边距的文本中加标签,然后分别控制每个文字的边距,这种方法比直接加空格或者占位符更精准,我之前也都是这么做的.但是写的多了之后开始思考能不能抽象出来用于更多的场景?让代码更好看一些?维护成本更低一些? 1.首先想到是能不能直接靠css解决问题 css .test-justify { text-align: justify; } html <div class="test-justify&qu
fontAwesome代替网页icon小图标
引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你也可能经常会看到的,如图所示: 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲到.因为它们也可以变为彩色的. 黑白的也好,彩色的也罢,如果用传统的“css + 图片”的方式来制作这些icon,我估计你至少得雇佣一个专业的设计师吧.一般的程序猿,包括前端程序猿
请用fontAwesome代替网页icon小图标
1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲到.因为它们也可以变为彩色的. 黑白的也好,彩色的也罢,如果用传统的“css + 图片”的方式来制作这些icon,我估计你至少得雇佣一个专业的设计师吧.一般的程序猿,包括前端程序猿,估计只能去搜索了,不会自己拿ps画.例如,我之前经常去一个叫做“懒人图库”的网站去找资源,现在那个网站还存在. 但是问
初识SFDC创建一个google map（添加了marker小图标）
1 <apex:page > 2 <head> 3 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 4 <script type="text/javascript" src="http://maps.google.cn/maps/api/js?sensor=false"></scr