小程序
小游戏
企业微信
微信支付
扫描小程序码分享
类似图片文字，在模拟器中设置文字垂直居中，垂直效果能实现。在ios机型上也是有效果的，但是在安卓系统的手机上，垂直居中效果未能实现，不同安卓手机会出现偏上或者偏下效果。求指点该如何设置样式，确保能适配不同的安卓机型？
9 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
用flex布局，然后line-height改成normal就可以了
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
都2024年了，还是偏上，webview加载的h5页面 用了vertical-align，align-items: center，line-height ，padding方式等全都无效，ide的模拟器上没问题，一上真机就完蛋华为苹果都显示偏上，真垃圾！
这个问题解决了吗
这个问题解决了吗？有啥比较好的解决方法，谢谢
我也遇到了，我的字体大小是24rpx 改成20rpx解决了
用px就会居中 rpx就不行
我觉得这个其实渲染引擎的问题，ios一般是没问题的，但是android上会出现这样的问题，不管是微信小程序还是手机浏览器，我都有遇到过。我在微信小程序中的解决方法是单独针对android处理（比较麻烦一点，android上使文字垂直居中，但是它一般会向上偏移几个像素，那么就在android的机型上让它向下移几个像素）：
// 获取系统信息
wepy.getSystemInfo().then(res => {
this
._system_ = !!~res.system.indexOf(
'Android'
) ?
'android'
:
'ios'
// eslint-disable-line
.$apply()
})
/* 单独处理 */
.vertical-text {
line-height
32
rpx;
}
.vertical-text.system-android {
36
嗯嗯，谢谢了，这种方法还没想到过，不过我这边发现有些大屏的手机其实会产生向下偏移的效果。
这种方法有点投机取巧，效果可能不好控制，使用的时候需要斟酌一下。
.center{
display:flex;
flex-direction:column;
align-items:center;
justify-content: center;
在开发工具里头是居中的，但是在不同安卓机型上就会出现不同的偏离。
我也遇到这个问题了
找找看解决方法吧，相互分享些思路。
比较难
用flex布局呢？ align-items justify-content 都设成center
尝试过这些办法了，但是还是在不同安卓机上还是有偏离，不知道还有没有其他办法去实现垂直居中。
图片！
图片也采用了，但是遇到那种动态的场景就不好用了。有没有比较灵活的解决办法？
canvas画图文。。
其实还是应该解决为啥没完全居中的问题。。主要是什么机型有问题啊，我看我这边有不
这个问题目前不是具体型号的问题，而是不同的安卓手机会有不同的偏离，可以用不同的安卓机测试下。
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
用flex布局，然后line-height改成normal就可以了
都2024年了，还是偏上，webview加载的h5页面 用了vertical-align，align-items: center，line-height ，padding方式等全都无效，ide的模拟器上没问题，一上真机就完蛋华为苹果都显示偏上，真垃圾！
这个问题解决了吗
这个问题解决了吗？有啥比较好的解决方法，谢谢
我也遇到了，我的字体大小是24rpx 改成20rpx解决了
用px就会居中 rpx就不行
我觉得这个其实渲染引擎的问题，ios一般是没问题的，但是android上会出现这样的问题，不管是微信小程序还是手机浏览器，我都有遇到过。我在微信小程序中的解决方法是单独针对android处理（比较麻烦一点，android上使文字垂直居中，但是它一般会向上偏移几个像素，那么就在android的机型上让它向下移几个像素）：
// 获取系统信息wepy.getSystemInfo().then(res => {this._system_ = !!~res.system.indexOf('Android') ?'android':'ios'// eslint-disable-linethis.$apply()})/* 单独处理 */.vertical-text {line-height:32rpx;}.vertical-text.system-android {line-height:36rpx;}嗯嗯，谢谢了，这种方法还没想到过，不过我这边发现有些大屏的手机其实会产生向下偏移的效果。
这种方法有点投机取巧，效果可能不好控制，使用的时候需要斟酌一下。
.center{
display:flex;
flex-direction:column;
align-items:center;
justify-content: center;
}
在开发工具里头是居中的，但是在不同安卓机型上就会出现不同的偏离。
我也遇到这个问题了
找找看解决方法吧，相互分享些思路。
比较难
用flex布局呢？ align-items justify-content 都设成center
尝试过这些办法了，但是还是在不同安卓机上还是有偏离，不知道还有没有其他办法去实现垂直居中。
图片！
图片也采用了，但是遇到那种动态的场景就不好用了。有没有比较灵活的解决办法？
canvas画图文。。
其实还是应该解决为啥没完全居中的问题。。主要是什么机型有问题啊，我看我这边有不
这个问题目前不是具体型号的问题，而是不同的安卓手机会有不同的偏离，可以用不同的安卓机测试下。