图标与文字对齐

在网页编辑中,经常遇到图标与文字在同一行的情况,这种情况下遇到最多的问题是图标与文字不对齐的现象。纠结了一段时间之后,发现了一个不错的解决方法。特此记录一下。


图标:icon.png(15×15)

样式:

<code>

.icon{

background:url(icon.png) center no-repeat;

background-position-x:0;

display:inline-block;

width:100px;

height:25px;

line-height:25px;

padding-left:15px;

}

</code>


标签:<span class="icon">事例文字</span>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 不会用代码框,所以看着有些乱套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 1,560评论 0 0
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,886评论 0 1
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,634评论 0 8
  • “你老实告诉我,高二那一年,你究竟为什么提出分手?” 对话框里沉默了好久,最终跳出了这样一句话。我能想象到,电脑另...
    林之屿阅读 358评论 0 3
  • 本文转自 http://mprc.pku.edu.cn/mentors/training/TrainingCou...
    井底蛙蛙呱呱呱阅读 331评论 0 1