003 - 移动端按钮中文字不垂直居中问题解析

<!--按钮html结构-->
<p>
<span>立即领取</span>
</p>

p{
width:30px;height:6px;border-radius:2px;background:red;
}

p  span{
-ms-transform: scale(0.5);-moz-transform: scale(0.5);-webkit-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);
-ms-transform-origin: 0 0;-moz-transform-origin: 0 0;-webkit-transform-origin: 0 0;-o-transform-origin: 0 0;transform-origin: 0 0;
display: inline-block;
width: 200%;height:12px;line-height:12px;font-size:16px;
}

/**

* 需要注意：span字体设为设计稿字体的2倍 ， width设为 p 的2倍， height设为 p 的2倍 ， line-height 与 span高度一致， 此时即可实现，在安卓上级上按钮文字垂直居中的效* 果

*/

效果图楼主就不再贴出 ， 爱学习的同学  亲自动手试试效果吧  ......