移动端Android中line-height不居中的解决办法

在写手机端的页面的时候 有时候发现在使用line-height居中的方法 在安卓机上显示不正常的 会往上移2px左右！于是查资料发现了比较靠谱的2种解决方式 。

第一种，改变字体大小 最直接的方法就是改变字体大小让它大于 12px 能够正常居中，如果页面对字体大小要求比较严格的话，可以先将原来包括 font-size 在内的属性放大两倍，再用 scale 缩小一倍，这样之后也是可行的：

<span class="content">Jason」</span>
.content {
    display: inline-block;
    height: 40px;
    background-color: gray;
    line-height: 40px;
    font-size: 20px;
    transform: scale(0.5);
    transform-origin: 0% 0%;
}

---

第2种. table布局 在元素外再包一层，使用表格布局

<div class="container"><span class="content">Jason's Word</span> </div>
.container {display: table;}
.content {
    background-color: gray;
    font-size: 10px;
    display: table-cell;
    vertical-align: middle;
}

补充：写这个的时候 最好用上外边距 这样写过会更好看一些！
转载原文地址: http://blog.csdn.net/jjx0224/article/details/53813542
如果各位大神有更好的方法，请多指教！

小礼物走一走，来简书关注我

作者：阳光之城alt
链接：https://www.jianshu.com/p/95b95aee5ccc
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。