关于移动端文字无法垂直居中(或line-height不起作用)的问题的解决方案(网摘)
最近开发移动端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不起作用)的问题的解决方案(网摘)的更多相关文章
- Android进阶(二十二)设置TextView文字水平垂直居中
设置TextView文字水平垂直居中 有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_T ...
- 移动端重构实战系列2——line list
这个line list的名字是我自己起的(大概的意思是单行列表),要实现的东西为sheral的line list,对应的scss组件为_line-list.scss,下图为line-list的一个缩影 ...
- 移动端 line-height 不垂直居中问题
本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 一般情况下, 我们把 line-height 的值设置为 height 的 ...
- WPF TextBox控件中文字实现垂直居中
TextBox纵向长度比较长但文字字体比较小的时候,在输入时就会发现文字不是垂直居中的. 而使用中我们发现,TextBox虽然可以设置文字的水平对齐方式,但却没有相应的属性让我们来调节他的垂直对齐方式 ...
- web端文字转语音的几种方案
最近在开发一个微信排队取号的的系统,其中对于服务员端(管理端) 需要有呼叫功能,即点按钮 就播出"xxx号顾客请就座"的声音. 经过在网上一番搜索研究,web端实现指定文字的语音播 ...
- 微信小程序文字水平垂直居中对齐问题
我们知道常用的居中对齐方式有很多种例如: text-align:center; align-items:center; justify-content: center; margin: auto; # ...
- DIV文字水平垂直居中的方法
水平居中 text-align:center 垂直居中(vertical-align) vertical-align:middle; vertical-align时而没效果 然而真实使用的时候,我们会 ...
- pc端常见布局---垂直居中布局 单元素定高
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 多行文字的垂直居中或高度不同的图片垂直居中---:after伪类+content
如何让多行文字垂直居中?或者如何让图片垂直居中? 1.demo--css .box { width: 300px; height: 300px; background-color: #f5e79e; ...
随机推荐
- <定时主库导出/备库导入>
1.设置定时任务时间及所需要的dmp文件路径 [mm1@localhost ~]$ crontab -e 0 0 * * * sh /home/mm1/exp_table.sh 2>& ...
- 仔细瞄一下HashMap是怎么干活的
以下分析基于jdk11.0.2 1. 创建HashMap时发生了什么? HashMap(),HashMap(int initialCapacity),HashMap(int initialCapaci ...
- 不支持模块化规范的插件可以使用import 导入的原因
模块化当中的模块其实是个闭包,然后导出这个闭包,这个是为了解决全局变量污染的问题的. 所以模块当中直接定义的变量 比如 var foo = 0; 这个并不会是全局变量,而是当前模块闭包当中的局部变量 ...
- 2017.8.2 Noip2018模拟测试赛(十八)
日期: 八月二日 总分: 300分 难度: 提高 ~ 省选 得分: 40分(又炸蛋了!!) 题目列表: T1:分手是祝愿 T2:残缺的字符串 T3:树点涂色 赛后心得: 哎,T1求期望,放弃. ...
- 洛谷 P 3379 【模板】最近公共祖先(LCA)
题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询问的个数和树根结点的序号. 接下来N-1行每 ...
- 开始学习es6(二) let 与 const 及 块级作用域
1.var JavaScript中,我们通常说的作用域是函数作用域,使用var声明的变量,无论是在代码的哪个地方声明的,都会提升到当前作用域的最顶部,这种行为叫做变量提升(Hoisting) cons ...
- 头条PC端的鼠标经过图片放大效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- LeetCode OJ--Path Sum *
https://oj.leetcode.com/problems/path-sum/ 树的深搜,求从根到叶子的路径. 记住深搜的样子 #include <iostream> using n ...
- LeetCode OJ--Search Insert Position
https://oj.leetcode.com/problems/search-insert-position/ 数组有序,给一个数,看它是否在数组内,如果是则返回位置,如果不在则返回插入位置. 因为 ...
- inotify+rsync实现实时同步(附解决crontab中无法执行python脚本的问题)
1.准备环境 # 系统支持的话,下面的目录就会存在 ls /proc/sys/fs/inotify/ rpm -qa inotify-tools yum -y install inotify-tool ...