资讯专栏INFORMATION COLUMN

前端常见问题——安卓文本无法垂直居中

aristark / 3200人阅读

摘要:安卓文本无法垂直居中的问题问题安卓的字体大小在小于像素的时候无法使用行高来垂直居中目前在微信等应用都存在该问题,而在最新的移动端浏览器上无该问题截止本文编写时间,微信客户端的版本为,版本为。

安卓文本无法垂直居中的问题 问题

安卓 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

相关文章

  • 安卓文本居中——关于css,字体和line-box的笔记

    摘要:前言本文主要探索在安卓系统下浏览器中小字号中文居中的实现以及在混排时的对齐处理。神奇的安卓字体根据所述,文字中从小到大可以划出三个区域,分别是,和。但是,部分安卓机器字体的字形不居中于,却居中于。 前言 本文主要探索在安卓系统下浏览器中小字号中文居中的实现以及在混排时的对齐处理。本文是受《Deep dive CSS: font metrics, line-height and vert...

    ideaa 评论0 收藏0
  • 关于移动端文字无法垂直居中(或line-height不起作用)的问题的解决方案

    摘要:最近开发移动端,发现安卓端对于文字垂直居中的问题兼容性不好,网上也搜了很多方法,但是都比较麻烦,自己摸索出来了最终的解决方案首先在头部把我们常用的改为。 最近开发移动端APP,发现安卓端对于文字垂直居中的问题兼容性不好,网上也搜了很多方法,但是都比较麻烦,自己摸索出来了最终的解决方案: 1、首先在html头部把我们常用的lang=en改为lang=zh-cmn-Hans。 此设置...

    ingood 评论0 收藏0
  • 关于移动端文字无法垂直居中(或line-height不起作用)的问题的解决方案

    摘要:最近开发移动端,发现安卓端对于文字垂直居中的问题兼容性不好,网上也搜了很多方法,但是都比较麻烦,自己摸索出来了最终的解决方案首先在头部把我们常用的改为。 最近开发移动端APP,发现安卓端对于文字垂直居中的问题兼容性不好,网上也搜了很多方法,但是都比较麻烦,自己摸索出来了最终的解决方案: 1、首先在html头部把我们常用的lang=en改为lang=zh-cmn-Hans。 此设置...

    Java3y 评论0 收藏0

发表评论

0条评论

aristark

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<