Android 浏览器文本垂直居中问题
2024-08-21 11:59:04
问题描述
在开发中,我们常使用 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 布局能够比较好地实现文本垂直居中,缺点是要在外面多包一层容器。
最后一种方式是 利用padding撑开 代码如下:
<span class="content">testtesttesttesttest</span>
.content {
display: inline-block;
line-height:normal;
padding:4px 0;
}
最新文章
- ApiAuthValue鉴权机制总结
- 【Android】解决新建的xml文件无法正常加载的问题
- 团队开发——冲刺2.e
- wamp下多域名配置
- 浅析在QtWidget中自定义Model
- leetcode 130. Surrounded Regions----- java
- (六)、nodejs中的express框架获取http参数
- Linux 关于解压
- 将MYSQL查询导出到文件
- Linux系统centOS7在虚拟机下的安装及XShell软件的配置
- GitHub Android Librarys Top 100 简介
- Idea的一些调试技巧
- python基础下的mysql学习之操作命令(一)
- WPF 列表开启虚拟化的方式
- java~springboot~ibatis数组in查询的实现
- android 6.0+ 动态权限 拒绝不再询问后跳转设置应用详情页面
- servlet篇 之servlet实现
- js调用Webservice接口案例
- ->;2018.06 计划
- 亿级用户百TB级数据的AIOps 技术实践之路
热门文章
- 全面理解java自动装箱和拆箱(转)
- python测试与调试提示
- JavaWeb项目实现文件下载
- How to get the edited text from itext in fabricjs
- Linq 数据排序,分页
- [Algorithm] Median Maintenance algorithm implementation using TypeScript / JavaScript
- Spring声明式事务的配置方式
- UI自动化测试篇 :ReportNG替代TestNG自带html版测试报告初探
- 累加按钮,自加1&;&;输入两个数字,比较大小
- iOS学习笔记之蓝牙(有关蓝牙设备mac地址处理)