Android 浏览器文本垂直居中问题
来源:互联网 发布:淘宝店铺首页需要dw吗 编辑:程序博客网 时间:2024/04/29 12:00
原文:http://imweb.io/topic/5848d0fc9be501ba17b10a94
问题描述
在开发中,我们常使用 line-height 属性来实现文本的垂直居中,但是在安卓浏览器渲染中有一个常见的问题,就是对于小于12px的字体使用 line-height 属性进行垂直居中的时候,渲染出来的效果并不是文字垂直居中,而是会偏上一些。举两个代码示例如下:
1. 大于12px
html
<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;}
利用 table 布局能够比较好地实现文本垂直居中,缺点是要在外面多包一层容器。
总结
在查阅了很多资料之后,虽然能够解决这个问题,但导致问题的具体原因还是不够明显,只知道是安卓端浏览器的渲染问题,再往深一点的原因就有点鞭长莫及了,若有同行研究过这个问题,还望不吝赐教哈~
- Android 浏览器文本垂直居中问题
- Android 绘制文本垂直居中
- android canvas drawText实现文本垂直居中
- 如何垂直居中文本
- css-文本垂直居中
- CSS 文本垂直居中
- 如何垂直居中文本
- DIV 浏览器水平垂直居中及文字垂直水平居中问题
- 文本垂直居中的方法
- CSS文本垂直居中解决方案
- 文本垂直居中DIV+CSS
- css使得文本垂直居中
- CSS div文本垂直居中
- CSS div文本垂直居中
- 文本的水平垂直居中
- 文本,子div垂直居中
- CEdit文本上下居中(垂直居中)
- 水平垂直居中问题
- 重拾python 三十一
- 深入理解Redis 中的事件循环
- Mysql中查询databases中多少张表及所有表名
- spring标签库
- clockwise print binary search tree
- Android 浏览器文本垂直居中问题
- 浅谈 Run-Time Check Failure #2 - Stack around the variable 'xxx' was corrupted 的解决方法
- Oracle导出表(即DMP文件)的两种方法
- Caffe模型移植到MXNet
- JPA学习(一)
- JS产生随机数的几个用法!
- 如何向别人推荐(分享)一本书
- eclipse 不自动编译 java 项目处理方法
- 资深互联网运营经理分析微信公众号如何通过内容运营来打动用户