摘要:安卓文本无法垂直居中的问题问题安卓的字体大小在小于像素的时候无法使用行高来垂直居中目前在微信等应用都存在该问题,而在最新的移动端浏览器上无该问题截止本文编写时间,微信客户端的版本为,版本为。
安卓文本无法垂直居中的问题 问题
安卓 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 热门
Android 浏览器文本垂直居中问题
解决 Android 浏览器下 line-height 垂直居中偏离问题
移动端android上line-height不居中的问题
完美解决移动Web小于12px文字居中的问题
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114247.html
摘要:前言本文主要探索在安卓系统下浏览器中小字号中文居中的实现以及在混排时的对齐处理。神奇的安卓字体根据所述,文字中从小到大可以划出三个区域,分别是,和。但是,部分安卓机器字体的字形不居中于,却居中于。 前言 本文主要探索在安卓系统下浏览器中小字号中文居中的实现以及在混排时的对齐处理。本文是受《Deep dive CSS: font metrics, line-height and vert...
摘要:最近开发移动端,发现安卓端对于文字垂直居中的问题兼容性不好,网上也搜了很多方法,但是都比较麻烦,自己摸索出来了最终的解决方案首先在头部把我们常用的改为。 最近开发移动端APP,发现安卓端对于文字垂直居中的问题兼容性不好,网上也搜了很多方法,但是都比较麻烦,自己摸索出来了最终的解决方案: 1、首先在html头部把我们常用的lang=en改为lang=zh-cmn-Hans。 此设置...
摘要:最近开发移动端,发现安卓端对于文字垂直居中的问题兼容性不好,网上也搜了很多方法,但是都比较麻烦,自己摸索出来了最终的解决方案首先在头部把我们常用的改为。 最近开发移动端APP,发现安卓端对于文字垂直居中的问题兼容性不好,网上也搜了很多方法,但是都比较麻烦,自己摸索出来了最终的解决方案: 1、首先在html头部把我们常用的lang=en改为lang=zh-cmn-Hans。 此设置...
阅读 2618·2021-10-12 10:12
阅读 776·2019-08-29 17:25
阅读 2779·2019-08-29 17:24
阅读 3201·2019-08-29 17:19
阅读 1791·2019-08-29 15:39
阅读 3029·2019-08-26 16:50
阅读 1980·2019-08-26 12:17
阅读 2693·2019-08-26 12:16