资讯专栏INFORMATION COLUMN

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

Java3y / 3679人阅读

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

最近开发移动端APP,发现安卓端对于文字垂直居中的问题兼容性不好,网上也搜了很多方法,但是都比较麻烦,自己摸索出来了最终的解决方案:

1、首先在html头部把我们常用的lang="en"改为lang="zh-cmn-Hans"



此设置会导致安卓端和iOS端的密码输入符会出现问题:

iOS端:(密码符号变大)

安卓端:(密码符号变小)

我们可以对需要密码框的页面多带带使用lang="en"的设置。

2、其次将中的font-family中设置的文字样式只保留以下两个:

font-family: -apple-system-font, sans-serif;

并将 Helvetica,Arial等字体删除,这些字体是造成安卓端文字无法垂直居中的主要原因。
当然删除这些字体会带来页面中的数字会发生变化:

这是不设置Helvetica等字体的数字样式:

这是设置了Helvetica等字体的数字样式:

因此我们若要处理一些重要的数字时,可以多带带对其设置字体样式。

最后附上按照我的方法处理前后的两张截图:

处理前:

处理后:

处理后,我的积分签到 +5积分均处于垂直居中状态。

PS:此方法并不能解决移动端font-size小于12px以下出现的不能垂直居中问题。可能还需要各位用其它方式来解决。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50636.html

相关文章

  • 关于移动文字无法垂直居中line-height不起作用问题解决方案

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

    ingood 评论0 收藏0
  • css布局基础总结

    摘要:想写出高效合理的布局,必须以深厚的基础为前提。现在布局方式主要分为三种传统布局方案等配合。弹性布局,实现方便,兼容性较好。在环境中的元素按照如下规则渲染和文档流一样,元素按照自己类型的布局特性从左到右,从上往下依次排列。 前端css布局知识繁杂,实现方式多种多样。想写出高效、合理的布局,必须以深厚的css基础为前提。为了方便记忆和复习,将css布局要点记录如下。内容较多,应用方面说的不...

    PrototypeZ 评论0 收藏0
  • 垂直居中---只需要两个小栗子

    摘要:两个小栗子讲完了,你明白了么文章末尾,再送两个小栗子当一个里没有内容时高度为,当有内容比如文字时,就有了高度,难道是文字把撑开了其实不是,这个高度是由元素的决定的。代码很简单使用布局也可以实现居中红色框上下居中文字在红色框中居中 之前学习垂直居中的时候在网上找了很多方法,看的我眼花撩乱,一直想着整理一下思路,透过那些纷繁的招式看到本质。首先明确一下概念: left是指子元素的左mar...

    darkbug 评论0 收藏0

发表评论

0条评论

Java3y

|高级讲师

TA的文章

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