移动端实现 iphone android 小图标 文字排版

标签：小图标文字对齐   前端   不同手机解析   

情景描述：

在手机浏览器中展示一些数据，这些数据前面都小图标，要求：小图标和文字水平对齐。

效果图

问题分析：

对于图文横排的问题，有很多的解决办法，但是究其根本还是将图片和文字放在同一行上进行展示。

实现方案：

方案一：

写法上很简单，但是这个的兼容性有很大问题。

.m-icon{

display:inline-block; 

vertical-align:middle;

 padding-right:1em;

 height:1em;

 background-image:url(icon.png);

 background-size:1em;

 background-repeat:no-repeat;

}

.m-icon.star{

background-position:npx npx;

}

.m-icon.like{

background-position:npx npx;

}

.m-icon.share{

background-position:npx npx;

}

.m-text{

display:inline-block;

vertical-align:middle;

font-size:1em;

}

<i class="m-icon star"></i><span></span>
<i class="m-icon like"></i><span></span>
<i class="m-icon share"></i><span></span>

方案二：

移动端实现 iphone android 小图标 文字排版

标签：小图标文字对齐   前端   不同手机解析   

原文地址：http://blog.csdn.net/wmzy1067111110/article/details/44201101