android html文字垂直居中,Android 浏览器文本垂直居中问题

本文作者:IMWeb ShiJianwen

未经同意,禁止转载

问题描述

在开发中,我们常使用 line-height 属性来实现文本的垂直居中,但是在安卓浏览器渲染中有一个常见的问题,就是对于小于12px的字体使用 line-height 属性进行垂直居中的时候,渲染出来的效果并不是文字垂直居中,而是会偏上一些。举两个代码示例如下:

1. 大于12px

html

testtesttest

css

span {

display:inline-block;

height:16px;

background-color:gray;

line-height:16px;

font-size:12px;

}

显示效果

86ae4beb33a247b6eee4254570f1866e.png

2. 小于12px

html

testtesttest

css

span {

display:inline-block;

height:16px;

background-color:gray;

line-height:16px;

font-size:10px;

}

显示效果

2d6511fe6ec8164abee060d5ad11e924.png

可以看到当 font-size 小于 12px 的时候,利用 line-height 属性进行垂直居中布局明显是偏上的,这里为了避免由于 font-size 是奇数带来的偏差,特意把 font-size 都设置成了偶数

问题原因

起初对这个问题有过两种推测,一是认为是字体的问题,或者是浏览器渲染的问题。但后面发现即使换了字体只要 font-size 还是小于 12px 一样会出现这个问题。

解决办法

看起来问题的根源在于字体大小小于 12px,所以解决问题可以从这个方向入手,要么改变字体大小,要么换个方式让它垂直居中。

1. 改变字体大小

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

testtesttesttesttest

.content {

display:inline-block;

height:40px;

background-color:gray;

line-height:40px;

font-size:20px;

transform:scale(0.5);

transform-origin:0% 0%;

}

f9df3ae6242538429627fe3790c21620.png

但不知道为什么,用这种方法之后我总是感觉文字没有绝对地居中,好像是有一点细微的偏下,不知道什么原因,不是 line-height 就是我的眼睛有问题。。。

2. table布局

在元素外再包一层,使用表格布局

testtesttesttesttest

.container {

display:table;

}

.content {

background-color:gray;

font-size:10px;

display:table-cell;

vertical-align:middle;

}

b7cb9089a16e252eb857993d5d50d1b1.png

利用 table 布局能够比较好地实现文本垂直居中,缺点是要在外面多包一层容器。

总结

在查阅了很多资料之后,虽然能够解决这个问题,但导致问题的具体原因还是不够明显,只知道是安卓端浏览器的渲染问题,再往深一点的原因就有点鞭长莫及了,若有同行研究过这个问题,还望不吝赐教哈~

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值