移动端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
如果各位大神有更好的方法,请多指教!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,419评论 0 11
  • 深入理解傅里叶变换Mar 12, 2017 这原本是我在知乎上对傅立叶变换、拉普拉斯变换、Z变换的联系?为什么要进...
    价值趋势技术派阅读 11,106评论 2 2
  • 此时的我躲在山洞里,身上的食物已经吃完,靠着溶洞里的水度日。身上的伤口还在流血,从来没有想到有一天我也会受伤,所以...
    吃螃蟹的蜘蛛阅读 2,600评论 0 0
  • 在我28岁这年,我很认真了思考着一个叫做人生的词语。这个时候我已经是一个3岁孩子妈了。过了两年的哺乳期,我退了单位...
    天平静静阅读 1,738评论 0 0

友情链接更多精彩内容