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

input中的文字无法垂直居中

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug input 微信iOS客户端 6.6.6 2.0.7

针对input的文字垂直居中，我单独做了个实验，重新编辑了此帖，存在于value 和 placeholder 是否有值造成的渲染差异，详细在代码片段中查看

麻烦官方看下，查下是否是渲染的BUG

@官方@官方@官方



wechatide://minicode/ZrB0Pwmq6KZA
最后一次编辑于  2018-05-19
回答关注问题邀请回答
收藏

9 个回答

  • 赵桓熠
    赵桓熠
    2023-02-10

    现在是2023年2月10日，依然存在这个问题。我的手机是vivo iqoo，微信小程序开发工具用的是刚下载的最新版。

    经过我的反复研究，发现，一定不要使用
box-sizing: border-box;
属性，否则肯定会出点问题，尤其是这个属性搭配height和padding使用！
    2023-02-10
    有用 2
    回复
  • 大大。
    大大。
    2021-06-24

    现在都还没修复

    2021-06-24
    有用 1
    回复
  • 丹丹妹儿
    丹丹妹儿
    2018-05-21

    input 和textarea 都有这问题，而且line-height 是没有效果的



    2018-05-21
    有用 1
    回复 1
    • Au
      Au
      2018-05-21
      +1，昨晚调半天，line-height确实没用
      2018-05-21
      赞
      回复
  • 若能绽放光。
    若能绽放光。
    2023-05-24

    2023-05-24

    2023-05-24
    有用
    回复
  • Bay🤥
    Bay🤥
    2021-07-07

    要不就直接出个计数器吧，这样我们也太难适配了

    2021-07-07
    有用
    回复
  • 哄哄
    哄哄
    2020-10-14

    搜索到这里来了... 18年的 现在也还有这个问题????

    2020-10-14
    有用
    回复 3
    • 词旧
      词旧
      2021-03-04
      2021了还是有这个问题
      2021-03-04
      赞 2
      回复
    • nanimonai
      nanimonai
      2021-08-03回复词旧
      2021年8月还有这个问题
      2021-08-03
      赞
      回复
    • 离开的月牙
      离开的月牙
      2021-10-27
      display: flex;
      flex-direction: column;
      2021-10-27
      赞 1
      回复
  • 视频号小店技术助手 - cunjin
    视频号小店技术助手 - cunjin
    2018-05-31

    问题没有复现，你是什么机型？

    2018-05-31
    有用
    回复 2
    • 相信自己
      相信自己
      2019-07-02

      iPhone7puls 是居中的 iPhone7 以下的小屏不居中

      2019-07-02
      赞
      回复
    • A 李 S
      A 李 S
      2020-01-27
      iphone6 和6s也有类似的问题，只不过是文本不能水平居中，应该是一个BUG。样式设置如下：
      .number {
          width: 50rpx;
          height: 38rpx;
          text-align: center;
      }
      2020-01-27
      赞
      回复
  • 任性༄🍎
    任性༄🍎
    2018-05-19

    @官方麻烦来看看

    2018-05-19
    有用
    回复 1
    • 任性༄🍎
      任性༄🍎
      2018-05-21
      真的没人来回答么？？@官方
      2018-05-21
      赞
      回复
  • 莫过于此
    莫过于此
    2018-05-19

    .operation .number {

    width: 60rpx;

    height: 40rpx;

    line-height: 40rpx;

    min-height: 40rpx;

    text-align: center;

    border: 0;

    background: transparent;

    font-size: 25rpx;

    color: #999;

    position: relative;

    z-index: 10;

    margin-top: -3rpx;

    }

    试一下

    2018-05-19
    有用
    回复 4
    • 莫过于此
      莫过于此
      2018-05-19
      input 的line-height本来也是没用的，内部文字也是默认剧中的，你看到的下移，是你input处于父盒子中位置导致的，而且你的父盒子溢出隐藏所以给你的错觉，给input用margin值调一下就好了
      2018-05-19
      赞
      回复
    • 任性༄🍎
      任性༄🍎
      2018-05-19
      我试了下，删除overflow这部分，其实，input的高度只有40rpx，不是应为overflow 的缘故造成的错觉，不加margin-top在真机 IOS中基本是居中的，不过聚焦的时候文字有下沉一丁点的微动、android中文字稍微偏上一点点，开发工具中就是截图的这样，错位太多，加上margin-top真机就真的错位太多，方法不可取
      2018-05-19
      赞
      回复
    • 相信自己
      相信自己
      2019-07-02

      官方什么时候修好这个bug啊

      2019-07-02
      赞
      回复
    • Lik-
      Lik-
      2022-03-16
      我想到一个办法：把input放在view里面，view里面用display=flex后，align-items=center然后再设置一个背景就可以假装居中了，现在再设置input的height就没问题了，恢复正常
      2022-03-16
      赞
      回复
请 登录 后发表内容
相关问题
相关文档