Android 浏览器文本垂直居中问题

问题描述

在开发中,我们常使用 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%;
}

但不知道为什么,用这种方法之后我总是感觉文字没有绝对地居中,好像是有一点细微的偏下,不知道什么原因,不是 line-height 就是我的眼睛有问题。。。

2. table布局 在元素外再包一层,使用表格布局

<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 布局能够比较好地实现文本垂直居中,缺点是要在外面多包一层容器。

总结

在查阅了很多资料之后,虽然能够解决这个问题,但导致问题的具体原因还是不够明显,只知道是安卓端浏览器的渲染问题,再往深一点的原因就有点鞭长莫及了,若有同行研究过这个问题,还望不吝赐教哈~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端新视界

两个 viewports 的故事-第二部分

原文:A tale of two viewports — part two 译者:nzbin 在这个迷你系列中,我将解释 viewports 和各种重要元素...

1707
来自专栏编程之旅

Rem布局的原理探究

在用前端给移动端页面写布局时,我接触到了Rem布局,但是老实说我也看了几篇手淘适配的文章,并且主要的目的是拿到代码写出demo,所以对于Rem我还是停留在只会使...

1102
来自专栏HTML5学堂

移动端H5知识[系列] - fixed定位模式与其他

TML5学堂:移动端H5知识普及 - fixed定位模式与其他。虽然知识小,但是不得不承认的是,它们很重要~! 本文会讲解到fixed的定位模式,另外,关于li...

2755
来自专栏小樱的经验随笔

【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

这个样式相信大家早已不陌生了,有关这个样式的实现估计很多人不太清楚,下面让我带大家来学习一下这个样式的实现~

794
来自专栏九彩拼盘的叨叨叨

用CSS来找出两张图的差异

其中,灰色的部分为相同的部分,并且灰色的部分的颜色值为rgb(127.5, 127.5, 127.5)。

681
来自专栏数据结构与算法

洛谷P1762 偶数(找规律)

 https://www.luogu.org/problemnew/solution/P1762 Orz

492
来自专栏mySoul

事件冒泡和传播

这还要从遥远的荒诞说起,两家网景和ie,为了能争夺市场,互相使用相反的技术,当网景使用事件传播的时候,ie使用事件冒泡。(两个正好相反)这个时候w3c来了,为了...

1136
来自专栏伪君子的梦呓

华氏温度转摄氏温度~ C++ 做法

题目链接:http://www.dotcpp.com/oj/problem1005.html

823
来自专栏诸葛青云的专栏

利用c语言制作简易计算器

学了c语言之后,总想着能用c语言能制作一些简单的小工具来。而利用c语言来制作一款简易的计算器是一个不错的选择,用这款计算器可以计算的加、减、乘、除。

581
来自专栏CreateAMind

beta tcvae实验结果图

最新相关论文 https://github.com/crslab/CHyVAE

572

扫码关注云+社区