使用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.这次要解 ...
随机推荐
- hdu6537 /// DP 最长不降子序列->最长公共子序列
题目大意: 给定一个字符串 字符为0~9 求翻转某个区间后使得串中的最长不降子序列最长 因为字符范围为0~9 假设有一个 0 1 2 3 4 5 6 7 8 9 的序列 此时翻转某个区间得到形如 0 ...
- mysql命令行执行时不输出列名(字段名),直接显示字段对应的数值
执行命令时加个-N参数就可以了 -N, –skip-column-names 比如说:mysql -uroot -p1234546 -N -e “select * from user;”
- thymeleaf种处理select,radio和文字回显的问题
select根据后台集合显示下列列表 <select class="form-control" name="parentId" > <opti ...
- R语言 运算符
R语言运算符 运算符是一个符号,通知编译器执行特定的数学或逻辑操作. R语言具有丰富的内置运算符,并提供以下类型的运算符. 运算符的类型 R语言中拥有如下几种运算符类型: 算术运算符 关系运算符 逻辑 ...
- bzoj1016题解
[解题思路] Kruskal的拓展. 可以先对边排序,进行一次Kruskal,判断是否可行,并计算出每种权值的边需要多少条. 然后暴力统计每种权值可行的方案数,根据乘法原理乘起来即可.复杂度o(210 ...
- NX二次开发-UFUN获取对象的显示属性(图层,颜色,空白状态,线宽,字体,高亮状态)UF_OBJ_ask_display_properties
NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_obj.h> UF_initialize( ...
- document.body / document.ducumentElement /等获取高度和宽度的区别
document.body / document.ducumentElement /等获取高度和宽度的区别 <!DOCTYPE html> <html> <head la ...
- Codeforces768B-Code For 1-类似线段树-枚举+单点更新or区间更新
目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:Portal传送门 原题目描述在最下面. 每次把\(n\ ...
- Ubuntu安裝nginx-1.6.2
1.在執行完./configure 和make install 後出現 test -d '/usr/local/nginx/logs' || mkdir -p '/usr/local/ ...
- SpringMVC(day1搭建SpringWebMvc项目)
MVC和webMVC的区别 Model(模型) 数据模型,提供要展示的数据,因此包含数据和行为,行为是用来处理这些数据的.不过现在一般都分离开来:Value Object(数据) 和 服务层(行为). ...