使用line-height垂直居中在安卓手机上效果不好
前端实现单行垂直居中用的最多的方法可能就是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垂直居中在安卓手机上效果不好的更多相关文章
- 安卓手机上运行 PC-E500 程序
目录 第1章安卓手机上运行 PC-E500 程序 1 1 PockEmul 1 2 下载 1 3 打包BASIC程序 2 4 配置PC-E500模拟器 5 5 载入e50 ...
- libmad和libmpg123解码mp3在安卓手机上的比较
libmad和libmpg123解码mp3在安卓手机上的比较1. libmad 选自 http://sourceforge.net/projects/mad libmad-0.15.1b.tar.g ...
- input type = file 在部分安卓手机上无法调起摄像头和相册
移动端H5web 用input type = file 在部分安卓手机上无法调起摄像头拍照,有的也无法访问相册而是直接访问了文档,解决办法是: 加上 accept = "image/*&qu ...
- 在安卓手机上通过虚拟机运行Windows XP
转自:https://www.ithome.com/html/android/302170.htm 细数当年的桌面版Windows,似乎针对ARM架构处理器的版本并不多,小编曾用过一段时间的Windo ...
- 安卓手机上微信无法打开Https网址的完美解决方案
1,第三方网站检测网站的SSL证书是否正确的安装 https://www.geocerts.com/ssl-checker,大概率你会看到下边的场景,一个证书链完整的警告,如果想知道我的基础配置是什么 ...
- 安卓手机上安装 谷歌 play 商店
安卓手机上安装 谷歌 play 商店 安卓(Android)就是现在流行的智能手机系统,它是由Google公司和开放手机联盟领导及开发.由于安卓系统的底层代码(AOSP)是开源的,以GPL和Apach ...
- 在安卓(手机)上运行 Ubuntu (Linux)
在安卓(手机)上运行 Ubuntu (Linux) 由于x86 和 arm 是跨平台的,所使用的编译器自然也不同.如果要在电脑上编译安卓手机上的程序,则需在电脑端建立ARM交叉编译环境,这个过程是在耗 ...
- 关于火狐浏览器在ubuntu和安卓手机上的同步
最近在ubuntu使用火狐浏览器,感觉还不错.我想着,如果在我的安卓手机上装一个火狐浏览器,我就可以在手机上查看电脑上所收藏的网站了.然后我就去安卓应用市场下载了最新版的火狐浏览器.令人奇怪的是,我在 ...
- ionic1使用imagepicker在安卓手机上闪退问题
在上一篇文章中,提到了如何在ionic1中使用imagepicker插件,并且实现该插件显示中文(汉化)问题有兴趣可以看看:ionic1使用ImagePicker插件并且显示中文(汉化) 1.这次要解 ...
随机推荐
- java-day25
. 标签学习: 1. 文件标签:构成html最基本的标签 * html:html文档的根标签 * head:头标签.用于指定html文档 ...
- C#获取系统服务+进程+启动时间
原文:C#获取系统服务+进程+启动时间 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/weixin_38208401/article/details ...
- python的三种特性
1.封装 什么时候用函数? 各个函数之间是独立的且无共用的数据. 什么时候用类? 函数之间是相关的,且有共用的数据,则可以使用类来封装. 所谓的封装: (1)使用构造方法将内容封装到 对象 中. (2 ...
- webstorm/vs取消eslint
vs ——preference ——setting,添加"eslint.enable": false webstorm ——setting ——language ——javascr ...
- MySQL 小调研
一. 概况: MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL ...
- sql 左连接与右连接
假设有A,B两个表. 表A记录如下: aID aNum 1 a20050111 2 a20050112 3 a20050113 4 a20050114 5 a20050115 表B记录如下: bID ...
- leetcood学习笔记-501- 二叉搜索树中的众数
题目描述: 方法一: class Solution: def findMode(self, root: TreeNode) -> List[int]: if not root: return [ ...
- CSP-S2019旅游记
CSP-S2019 你问我为什么写旅游记? 因为好像除了旅游我今年啥都没干 Day0 校内模拟一直被吊锤,考前几场几乎要爆零 这提莫就不是什么好兆头 在家二刷水淹东京完回学校,带了一大堆家当上车 去广 ...
- 约数个数求和+线性筛约数——bzoj3994
这题首先要会线性筛约数个数,并求出前缀和 bool vis[maxn]; int mm,mu[maxn],prime[maxn],num[maxn],sum[maxn],d[maxn],sum1[ma ...
- flutter 显示base64 图片
后台返回base64 为了本地显示需要转换成Uint8List 1.导入包 import 'dart:convert';2.后台返回base64 格式不被识别需要切分 //'"data:im ...