公告列表
公告列表
收藏
回答

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

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug text 客户端 6.7.3 2.3.0


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

回答关注问题邀请回答
收藏

8 个回答

  • 一如既往
    一如既往
    2021-11-05

    用flex布局，然后line-height改成normal就可以了

    2021-11-05
    有用
    回复
  • 逸世凌虚
    逸世凌虚
    2020-01-15

    这个问题解决了吗

    2020-01-15
    有用
    回复
  • 春节快乐
    春节快乐
    2019-08-27

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

    2019-08-27
    有用
    回复
  • 咻咻superme~
    咻咻superme~
    2019-01-08

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

    2019-01-08
    有用
    回复
  • 2018-12-25

    用px就会居中  rpx就不行

    2018-12-25
    有用
    回复
  • Chia June Fu
    Chia June Fu
    2018-10-11

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


    2018-10-11
    有用
    回复 2
    • 缘，妙不可言
      缘，妙不可言
      2018-10-11

      嗯嗯，谢谢了，这种方法还没想到过，不过我这边发现有些大屏的手机其实会产生向下偏移的效果。

      2018-10-11
      赞
      回复
    • Chia June Fu
      Chia June Fu
      2018-10-11

      这种方法有点投机取巧，效果可能不好控制，使用的时候需要斟酌一下。

      2018-10-11
      赞
      回复
  • 殿春
    殿春
    2018-10-11

    .center{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content: center;

    }


    2018-10-11
    有用
    回复 4
    • 缘，妙不可言
      缘，妙不可言
      2018-10-11

      在开发工具里头是居中的，但是在不同安卓机型上就会出现不同的偏离。

      2018-10-11
      赞
      回复
    • MCC
      MCC
      2018-10-11回复缘，妙不可言

      我也遇到这个问题了

      2018-10-11
      赞
      回复
    • 缘，妙不可言
      缘，妙不可言
      2018-10-11回复MCC

      找找看解决方法吧，相互分享些思路。

      2018-10-11
      赞
      回复
    • MCC
      MCC
      2018-10-11回复缘，妙不可言

      比较难

      2018-10-11
      赞
      回复
  • 卢霄霄
    卢霄霄
    2018-10-11

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

    2018-10-11
    有用
    回复 6
    • 缘，妙不可言
      缘，妙不可言
      2018-10-11

      尝试过这些办法了，但是还是在不同安卓机上还是有偏离，不知道还有没有其他办法去实现垂直居中。

      2018-10-11
      赞
      回复
    • 卢霄霄
      卢霄霄
      2018-10-11回复缘，妙不可言

      图片！

      2018-10-11
      赞
      回复
    • 缘，妙不可言
      缘，妙不可言
      2018-10-11回复卢霄霄

      图片也采用了，但是遇到那种动态的场景就不好用了。有没有比较灵活的解决办法？

      2018-10-11
      赞
      回复
    • 卢霄霄
      卢霄霄
      2018-10-11回复缘，妙不可言

      canvas画图文。。

      其实还是应该解决为啥没完全居中的问题。。主要是什么机型有问题啊，我看我这边有不

      2018-10-11
      赞
      回复
    • 缘，妙不可言
      缘，妙不可言
      2018-10-11回复卢霄霄

      这个问题目前不是具体型号的问题，而是不同的安卓手机会有不同的偏离，可以用不同的安卓机测试下。

      2018-10-11
      赞
      回复
    查看更多(1)
请 登录 后发表内容
相关问题
相关文档