V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
pheyer
V2EX  ›  微信

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

  •  
  •   pheyer · 2018-04-18 16:26:06 +08:00 · 3919 次点击
    这是一个创建于 2396 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <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
        1
    imwalson  
       2018-04-18 20:11:32 +08:00 via Android
    高度和 font-size 都设置为现在的两倍大,然后再整个缩小 50%就可以解决
    pheyer
        2
    pheyer  
    OP
       2018-04-19 09:09:55 +08:00
    @imwalson 居然没有你回复消息的提醒。。。两倍大的问题是容器高度也变大了,这可怎么办
    imwalson
        3
    imwalson  
       2018-04-19 09:42:24 +08:00 via Android
    @pheyer 就是对整个容器应用缩放,因为容器整个变大了,字体、内边距和圆角大小全部变为两倍,对容器整个缩小才能达到效果
    pheyer
        4
    pheyer  
    OP
       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
        5
    az09py  
       2018-04-19 11:09:51 +08:00
    留坑,我也遇到这个问题
    imwalson
        6
    imwalson  
       2018-04-20 07:51:07 +08:00 via Android
    @pheyer 试试给容器一个高度,上下 padding 去掉,然后用相同的 line-height 来居中。比如 height:60rpx;line-height: 60rpx;padding: 0 16rpx;
    ByZHkc3
        7
    ByZHkc3  
       2019-09-20 12:08:59 +08:00
    display: flex;
    align-items: center;
    justify-content: center;
    serge001
        8
    serge001  
       2020-04-23 13:56:50 +08:00
    height:auto;
    line-height: normal;
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2828 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 77ms · UTC 02:10 · PVG 10:10 · LAX 18:10 · JFK 21:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.