安卓文本无法垂直居中的问题
问题
安卓 webview 的字体大小在小于 12 像素的时候无法使用行高来垂直居中
ps:目前在微信等应用都存在该问题,而在最新的移动端 Chrome 浏览器上无该问题(截止本文编写时间,微信客户端的 chrome 版本为 57,chrome 版本为 70)。
尝试方案
table 布局:文本偏上
hot 热门
flex 布局:文本偏上
hot 热门
transform 缩放:文本居中了,但是 transform 不能还原元素在 dom 上的占用区域大小
hot 热门
zoom 缩放:文本偏上
hot 热门
固定高度+内边距+行高设定为字体大小:文本偏上
hot 热门
固定高度+内边距+行高设为 normal:文本偏上
hot 热门
内边距+行高设为 normal:文本居中,但在部分客户端上不居中
hot 热门
行高+字体大小设为 initial:文本居中,在最新的 Chrome 浏览器上不居中
hot 热门
解决方案
在不同的安卓客户端上测试上述方法发现以下三个方法或许可以帮助解决居中问题,我们可以根据实际客户端的支持情况来选择其中一种方式来解决无法居中问题。
transform 缩放
hot 热门
内边距+行高设为 normal
hot 热门
行高+字体大小设为 initial
hot 热门
参考文献