android 字体竖直居中_Android 浏览器文本垂直居中问题

问题描述

在开发中，我们常使用 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;

}

2. 小于12px html

testtesttest

css

span {

display: inline-block;

height: 16px;

background-color: gray;

line-height: 16px;

font-size: 10px;

}

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

问题原因

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

解决办法

看起来问题的根源在于字体大小