android html文字垂直居中,Android 浏览器文本垂直居中问题

本文作者：IMWeb ShiJianwen

未经同意，禁止转载

问题描述

在开发中，我们常使用 line-height 属性来实现文本的垂直居中，但是在安卓浏览器渲染中有一个常见的问题，就是对于小于12px的字体使用 line-height 属性进行垂直居中的时候，渲染出来的效果并不是文字垂直居中，而是会偏上一些。举两个代码示例如下：

1. 大于12px

html

testtesttest

css

span {

display:inline-block;

height:16px;

background-color:gray;

line-height:16px;

font-size:12px;

}

显示效果

2. 小于12px

html

testtesttest

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 缩小一倍，这样测试之后也是可行的：

testtesttesttesttest

.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布局

在元素外再包一层，使用表格布局

testtesttesttesttest

.container {

display:table;

}

.content {

background-color:gray;

font-size:10px;

display:table-cell;

vertical-align:middle;

}

利用 table 布局能够比较好地实现文本垂直居中，缺点是要在外面多包一层容器。

总结

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

android html文字垂直居中,Android 浏览器文本垂直居中问题相关推荐

android 文本框输入默认文字居中,Android系统。 TextView中的文本垂直居中
我有一个ViewGroup类,它可以添加自定义视图并在画布上绘制饼图.在圆圈的中心,我有一个TextView.但无论我做什么,我都无法将TextView中的文本垂直居中. 在这种情况下,Root视图是 ...
android 自定义文字位置,Android设置显示文本
如果不设置singleLine或者设置为false,文本将自动换行, android:text设置显示文本. android:textAppearance设置文字外观.如 "android: ...
android 图片文字布局,Android自定义控件图片+文字布局
本来想用Tabrow来布局一组上面是图片下面是文字说明的控件,可是发现Tabrow不像想象的那样简易,并且这几组之间的控件距离很差把握,在网上找了两种方法以供参照.html 方法1.利用RadioBu ...
android 图片文字布局,Android代码实现图片和文字上下布局
在Android开发中经常会需要用到带文字和图片的button,下面来给大家介绍使用radiobutton实现图片和文字上下布局或左右布局.代码很简单就不给大家多解释了. 布局文件很简单,用来展示Ra ...
android duiqi文字底部,Android中的文本/布局对齐(textAlignment,gravity)
小智.. 10 使用API 15,android:textAlignment可能没有所需的结果.下面的代码段尝试TextView使用第一个对象居中android:textAlignment=&qu ...
css如何设置文本垂直居中显示,css中怎么设置文本居中？css文本垂直居中的设置方法...
在网页设计的过程中,有时候可能为了布局美观可能需要让文本居中,那么,怎么设置文本居中呢?本篇文章将给大家介绍关于css设置文本垂直居中的方法. 首先我们要知道通过css实现元素的水平居中较为简单:对文 ...
android textview 文字居中无效,android – 不能垂直居中textview的文本
[已解决]我不得不向ScrollView添加 android:fillViewport ="true",修复了文本没有垂直居中的问题. 我知道之前已经多次回答,但我仍然无法垂直居中 ...
android 文本框输入默认文字居中,Android drawText 做到文字绝对居中(示例代码)
我们在android中经常会遇到自定义一些组件,因为现有的android组件是往往不能满足当下的需求的,今天就给大家介绍一下在自定义组建过程中用到的drawText不居中的问题的解决方案首先大家看一 ...
android drawableleft 垂直居中,Android TextView前加图标垂直居中第一行(仿大众点评购买须知/提示语)...
如上图,需求在每条提示语句前加一个小圆点,我刚看到需求就想到用 android:drawableLeft 来作,可作完发现:当TextView内容为单行的时候是没有问题的,多行的时候,添加的这个dra ...

android html文字垂直居中,Android 浏览器文本垂直居中问题

android html文字垂直居中,Android 浏览器文本垂直居中问题相关推荐

最新文章

热门文章