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

Posted 进军的蜗牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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%;
}

 

但不知道为什么,用这种方法之后我总是感觉文字没有绝对地居中,好像是有一点细微的偏下,

<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中TextView的水平和垂直居中文本

css常用代码片段 (更新中)

无法垂直居中 textview 的文本

如何在Android中的Button上垂直居中drawableTop和文本?

按钮文本没有在按钮中垂直居中

单选框和复选框与文本的垂直居中显示问题