文字垂直居中在Android机型表现不一致 - WXOPEN Club

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

7 回复

yang701 楼6 年前

.center{

display:flex;

flex-direction:column;

align-items:center;

justify-content: center;

}

yuanqiang2 楼6 年前

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

schen3 楼6 年前

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

litao4 楼6 年前

用px就会居中 rpx就不行

chao585 楼6 年前

我觉得这个其实渲染引擎的问题，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;

}

luoguiying6 楼6 年前

这个问题解决了吗

liufang7 楼5 年前

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