敢说敢作敢为, 无怨无恨无悔。这篇文章主要讲述Android 浏览器文本垂直居中问题相关的知识,希望能为你提供帮助。
问题描述在开发中,我们常使用 line-height 属性来实现文本的垂直居中,但是在安卓浏览器渲染中有一个常见的问题,就是对于小于12px的字体使用 line-height 属性进行垂直居中的时候,渲染出来的效果并不是文字垂直居中,而是会偏上一些。举两个代码示例如下:
1. 大于12pxhtml
< span> testtesttest< /span>
css
span { display: inline-block; height: 16px; background-color: gray; line-height: 16px; font-size: 12px; }
< !-- more -->
2. 小于12px html
< span> testtesttest< /span>
css
span { display: inline-block; height: 16px; background-color: gray; line-height: 16px; font-size: 10px; }
可以看到当 font-size 小于 12px 的时候,利用 line-height 属性进行垂直居中布局明显是偏上的,这里为了避免由于 font-size 是奇数带来的偏差,特意把 font-size 都设置成了偶数
问题原因起初对这个问题有过两种推测,一是认为是字体的问题,或者是浏览器渲染的问题。但后面发现即使换了字体只要 font-size 还是小于 12px 一样会出现这个问题。
解决办法看起来问题的根源在于字体大小小于 12px,所以解决问题可以从这个方向入手,要么改变字体大小,要么换个方式让它垂直居中。
1. 改变字体大小 最直接的方法就是改变字体大小让它大于 12px 能够正常居中,如果页面对字体大小要求比较严格的话,可以先将原来包括 font-size 在内的属性放大两倍,再用 scale 缩小一倍,这样测试之后也是可行的:
< span class="content"> testtesttesttesttest< /span>
.content { display: inline-block; height: 40px; background-color: gray; line-height: 40px; font-size: 20px; transform: scale(0.5); transform-origin: 0% 0%; }
但不知道为什么,用这种方法之后我总是感觉文字没有绝对地居中,好像是有一点细微的偏下,
< div class="container"> < span class="content"> testtesttesttesttest< /span> < /div>
.container { display: table; } .content { background-color: gray; font-size: 10px; display: table-cell; vertical-align: middle; }
【Android 浏览器文本垂直居中问题】利用 table 布局能够比较好地实现文本垂直居中,缺点是要在外面多包一层容器。
推荐阅读
- appium获取android app的包名和主Activity
- Appium 服务命令行参数
- 解决Android Studio出现Failed to open zip file. Gradle's dependency cache may be corrupt的问题
- Android Error:Could not find lottie.jar
- C#项目中引入app.manifest管理员权限运行
- -Android学习笔记之(初识Android系统架构和项目结构)
- 在fragment中实现Android上传图片至本地JavaWeb服务器
- bzoj 2100: [Usaco2010 Dec]Apple Deliveryspfa
- Filtering Approaches for Real-Time Anti-Aliasing(2011 SIGGRAPH)