前端实现单行垂直居中用的最多的方法可能就是line-height了吧。该属性在pc端和ios手机上效果都很好,可到了安卓手机,有很大几率发生文字上移的现象

知乎有人分析了导致这一现象的原因,Android浏览器下line-height垂直居中为什么会偏离?大家可以试试文章中的解决方案,反正我试了并没有起作用,即使起作用,也不愿意违背UI的意图去改字体。在网上找了其他几种方案,效果不好说,最好亲自去试一试。

我用着比较靠谱的两个:

1.将字体,高度放大一倍后缩小(亲测可用):

div{
font-size: 24px; // 设置为原来值的两倍
height: 40px; // 设置为原来值的两倍
line-height: 40px; // 设置为原来值的两倍
transform: scale(0.5);
transform-origin: 0 0; // 根据实际设置
}

2.使用vertical-align属性居中:

.parent{
display: table;
}
.child{
display: table-cell;
vertical-align: middle;
}

使用line-height垂直居中在安卓手机上效果不好的更多相关文章

  1. 安卓手机上运行 PC-E500 程序

    目录 第1章安卓手机上运行 PC-E500 程序    1 1 PockEmul    1 2 下载    1 3 打包BASIC程序    2 4 配置PC-E500模拟器    5 5 载入e50 ...

  2. libmad和libmpg123解码mp3在安卓手机上的比较

    libmad和libmpg123解码mp3在安卓手机上的比较1. libmad 选自 http://sourceforge.net/projects/mad  libmad-0.15.1b.tar.g ...

  3. input type = file 在部分安卓手机上无法调起摄像头和相册

    移动端H5web 用input type = file 在部分安卓手机上无法调起摄像头拍照,有的也无法访问相册而是直接访问了文档,解决办法是: 加上 accept = "image/*&qu ...

  4. 在安卓手机上通过虚拟机运行Windows XP

    转自:https://www.ithome.com/html/android/302170.htm 细数当年的桌面版Windows,似乎针对ARM架构处理器的版本并不多,小编曾用过一段时间的Windo ...

  5. 安卓手机上微信无法打开Https网址的完美解决方案

    1,第三方网站检测网站的SSL证书是否正确的安装 https://www.geocerts.com/ssl-checker,大概率你会看到下边的场景,一个证书链完整的警告,如果想知道我的基础配置是什么 ...

  6. 安卓手机上安装 谷歌 play 商店

    安卓手机上安装 谷歌 play 商店 安卓(Android)就是现在流行的智能手机系统,它是由Google公司和开放手机联盟领导及开发.由于安卓系统的底层代码(AOSP)是开源的,以GPL和Apach ...

  7. 在安卓(手机)上运行 Ubuntu (Linux)

    在安卓(手机)上运行 Ubuntu (Linux) 由于x86 和 arm 是跨平台的,所使用的编译器自然也不同.如果要在电脑上编译安卓手机上的程序,则需在电脑端建立ARM交叉编译环境,这个过程是在耗 ...

  8. 关于火狐浏览器在ubuntu和安卓手机上的同步

    最近在ubuntu使用火狐浏览器,感觉还不错.我想着,如果在我的安卓手机上装一个火狐浏览器,我就可以在手机上查看电脑上所收藏的网站了.然后我就去安卓应用市场下载了最新版的火狐浏览器.令人奇怪的是,我在 ...

  9. ionic1使用imagepicker在安卓手机上闪退问题

    在上一篇文章中,提到了如何在ionic1中使用imagepicker插件,并且实现该插件显示中文(汉化)问题有兴趣可以看看:ionic1使用ImagePicker插件并且显示中文(汉化) 1.这次要解 ...

随机推荐

  1. S1#Python之shebang

    点1 - Python之shebang 一. shebang 在计算机科学中,Shebang是一个由井号和叹号构成的字符串行,其出现在文本文件的第一行的前两个字符. 在文件中存在Shebang的情况下 ...

  2. Flask理论基础(一)加载配置文件

    一.修改/新增配置项 1.使用配置文件 app.config.from_pyfile("config.cfg") 如上 config.cfg 可以是任意后缀的文本文件,需要与app ...

  3. 标准 IO fprintf 与 sprintf 函数使用

    函数原型 fprintf int fprintf(FILE *stream, const char *format, ...);  把数据写到流中 int sprintf(char *str, con ...

  4. codeforces750E New Year and Old Subsequence 矩阵dp + 线段树

    题目传送门 思路: 先看一个大牛的题解 题解里面对矩阵的构造已经写的很清楚了,其实就是因为在每个字符串都有固定的很多中状态,刚好可以用矩阵来表达,所以$(i,j)$这种状态可以通过两个相邻的矩阵的$m ...

  5. AF_UNIX

    3.SOCK_SEQPACKET SOCK_SEQPACKET提供一个顺序确定的,可靠的,双向基于连接的socket endpoint. 与SOCK_STREAM不同的是,它保留消息边界.(表明发送两 ...

  6. 召回率、AUC、ROC模型评估指标精要

    混淆矩阵 精准率/查准率,presicion 预测为正的样本中实际为正的概率 召回率/查全率,recall 实际为正的样本中被预测为正的概率 TPR F1分数,同时考虑查准率和查全率,二者达到平衡,= ...

  7. react css拓展 使用less

    react 之中使用less 其实质只需要看一下resct 使用css的配置项,就能明白个大概了  第一步   还是下载 npm i  less less-loader -save 下载less 和 ...

  8. Wpf 获取指定字体和大小的字符的长宽

    Wpf 获取指定字体和大小的字符的长宽 运行环境:Win10 x64, NetFrameWork 4.8, 作者:乌龙哈里,日期:2019-05-09 参考: 章节: 比如一个 Consolas 字体 ...

  9. C#反射从入门到放弃(这部分遇到的新东西太多了让人接受不能)

    首先,我们需要知道type,type是类型的类型(笑 官方点的说法是,BCL声明了一个Type抽象类,它被设计用来包含类型的特性, 使用这个类的对象(抽象类的对象?这显然是错误的,但是这里用的其实是T ...

  10. vue导出table内容至excel——转

    一:在项目中需要安装2个依赖项,如下命令: npm install --save file-saver xlsx 二:在vue文件中如下使用即可: <template> <div c ...