微信小程序 Android 端文字垂直居中 bug

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2404 天前的主题，其中的信息可能已经有所发展或是发生改变。

<button class="test">测试</button>
<style>
.test{
    color: #c4181f;
    font-size: 24rpx;
    line-height:24rpx;
    border: 1rpx solid #c4181f;
    border-radius: 10rpx;
    padding: 10rpx;
}
</style>

上面的代码在 iOS 上面显示垂直居中显示没有问题，但是在 Android 上就会偏上一点显示根据 http://www.tonjay.com/416.html 应该是 Android webview 的 bug，也影响到了安卓小程序端，试过了文中的方法，感觉没什么用，你们都是怎么解决的，还是不管它？

8 条回复 • 2020-04-23 13:56:50 +08:00

imwalson

2018-04-18 20:11:32 +08:00 via Android

高度和 font-size 都设置为现在的两倍大，然后再整个缩小 50%就可以解决

pheyer

2018-04-19 09:09:55 +08:00

@imwalson 居然没有你回复消息的提醒。。。两倍大的问题是容器高度也变大了，这可怎么办

imwalson

2018-04-19 09:42:24 +08:00 via Android

@pheyer 就是对整个容器应用缩放，因为容器整个变大了，字体、内边距和圆角大小全部变为两倍，对容器整个缩小才能达到效果

pheyer

2018-04-19 10:04:27 +08:00

@imwalson 可是我发现把所有 rpx 值都扩大为原来的两倍，Android 上的居中效果仍然是偏上的，css 样式如下：
.color-box {
position:absolute;
display: inline-block;
left: 20rpx;
top: 20rpx;
border-radius:5rpx;
border: 2rpx solid #BEAF85;
background: #EAE6D7;
font-size: 40rpx;
padding: 8rpx 16rpx;
color: #BEAF85;
}

40rpx 的字体 size 肯定能保证最终字体 size>12px，看别人的文章都说字体大于 12px 就没有垂直居中偏上的问题，但是自己测试并不是这样

az09py

2018-04-19 11:09:51 +08:00

留坑，我也遇到这个问题

imwalson

2018-04-20 07:51:07 +08:00 via Android

@pheyer 试试给容器一个高度，上下 padding 去掉，然后用相同的 line-height 来居中。比如 height：60rpx;line-height: 60rpx;padding: 0 16rpx;

ByZHkc3

2019-09-20 12:08:59 +08:00

display: flex;
align-items: center;
justify-content: center;

serge001

2020-04-23 13:56:50 +08:00

height:auto;
line-height: normal;