最近开发移动端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以下出现的不能垂直居中问题。可能还需要各位用其它方式来解决。

关于移动端文字无法垂直居中（或line-height不起作用）的问题的解决方案(网摘)的更多相关文章

  1. Android进阶(二十二)设置TextView文字水平垂直居中

    设置TextView文字水平垂直居中 有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_T ...

  2. 移动端重构实战系列2——line list

    这个line list的名字是我自己起的(大概的意思是单行列表),要实现的东西为sheral的line list,对应的scss组件为_line-list.scss,下图为line-list的一个缩影 ...

  3. 移动端 line-height 不垂直居中问题

    本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 一般情况下, 我们把 line-height 的值设置为 height 的 ...

  4. WPF TextBox控件中文字实现垂直居中

    TextBox纵向长度比较长但文字字体比较小的时候,在输入时就会发现文字不是垂直居中的. 而使用中我们发现,TextBox虽然可以设置文字的水平对齐方式,但却没有相应的属性让我们来调节他的垂直对齐方式 ...

  5. web端文字转语音的几种方案

    最近在开发一个微信排队取号的的系统,其中对于服务员端(管理端) 需要有呼叫功能,即点按钮 就播出"xxx号顾客请就座"的声音. 经过在网上一番搜索研究,web端实现指定文字的语音播 ...

  6. 微信小程序文字水平垂直居中对齐问题

    我们知道常用的居中对齐方式有很多种例如: text-align:center; align-items:center; justify-content: center; margin: auto; # ...

  7. DIV文字水平垂直居中的方法

    水平居中 text-align:center 垂直居中(vertical-align) vertical-align:middle; vertical-align时而没效果 然而真实使用的时候,我们会 ...

  8. pc端常见布局---垂直居中布局 单元素定高

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 多行文字的垂直居中或高度不同的图片垂直居中---:after伪类+content

    如何让多行文字垂直居中?或者如何让图片垂直居中? 1.demo--css .box { width: 300px; height: 300px; background-color: #f5e79e; ...

随机推荐

  1. bzoj3210 花神的浇花集会 坐标

    题目大意:给定平面上的n个点,求一个点到这n个点的切比雪夫距离之和最小 与3170不同的是这次选择的点无需是n个点中的一个 首先将每个点(x,y)变为(x+y,x-y) 这样新点之间的曼哈顿距离的一半 ...

  2. 解决v-for产生的警告的办法

    当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略.如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且 ...

  3. 模仿世纪佳缘网站PC端的首页效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 眉目传情之匠心独运的kfifo【转】

    转自:http://blog.csdn.net/chen19870707/article/details/39899743 权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] 一 ...

  5. BZOJ 4568 [Scoi2016]幸运数字（树链剖分 + 异或线性基）

    题目链接  BZOJ 4568 考虑树链剖分+线段树维护每一段区域的异或线性基 对于每个询问,求出该点集的异或线性基.然后求一下这个线性基里面能异或出的最大值即可. #include <bits ...

  6. awk如何区分shell脚本传进来的参数和自身的参数？awk如何获取shell脚本传进来的参数；awk中如何执行shell命令

    问题:对于shell脚本,$0表示脚本本身,$1表示脚本的第一个参数,$2……依次类推:对于awk,$1表示分割后的第一个字段,$2……依次类推.那么对于shell脚本中的awk如何区分两者呢? 答案 ...

  7. sublime的tab和spaces空格切换的坑

    python是严格要求对齐或者叫缩进的: 使用sublime对python进行编程时,可以使用tab或者空格,但是不能混用.特别是从外面把代码拷贝进sublime的时候,更要注意是否一致. 简单介绍一 ...

  8. 3.【nuxt起步】-下面以一个SPA单页程序为例子

    spa:single page applcation 1.components目录新建header.vue,footer.vue Header.vue Footer.vue Pages/index.v ...

  9. HDU 2236 无题II（二分图匹配+二分）

    HDU 2236 无题II 题目链接 思路:行列仅仅能一个,想到二分图,然后二分区间长度,枚举下限.就能求出哪些边是能用的,然后建图跑二分图,假设最大匹配等于n就是符合的 代码: #include & ...

  10. 怎么在SQL查询的结果里加行号？

    怎么在SQL查询的结果里加行号? 学习了:https://zhidao.baidu.com/question/91188037.html mysql : ) as rowNo From a, () ) ...