文字垂直居中在Android机型表现不一致
发布于 6 年前 作者 bmeng 16369 次浏览 来自 问答

类似图片文字,在模拟器中设置文字垂直居中,垂直效果能实现。在ios机型上也是有效果的,但是在安卓系统的手机上,垂直居中效果未能实现,不同安卓手机会出现偏上或者偏下效果。求指点该如何设置样式,确保能适配不同的安卓机型?

7 回复

.center{

display:flex;

flex-direction:column;

align-items:center;

justify-content: center;

}

我也遇到了,我的字体大小是24rpx  改成20rpx解决了

这个问题解决了吗?有啥比较好的解决方法,谢谢

用px就会居中  rpx就不行

我觉得这个其实渲染引擎的问题,ios一般是没问题的,但是android上会出现这样的问题,不管是微信小程序还是手机浏览器,我都有遇到过。我在微信小程序中的解决方法是单独针对android处理(比较麻烦一点,android上使文字垂直居中,但是它一般会向上偏移几个像素,那么就在android的机型上让它向下移几个像素):

// 获取系统信息
 
wepy.getSystemInfo().then(res => {
 
this._system_ = !!~res.system.indexOf('Android') ? 'android' : 'ios' // eslint-disable-line
 
this.$apply()
 
})
/* 单独处理 */
.vertical-text {
  line-height: 32rpx;
}
.vertical-text.system-android {
  line-height: 36rpx;
}

这个问题解决了吗

用flex布局呢? align-items  justify-content 都设成center

回到顶部