问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

输入框提示文字的居中问题

头像
undefind_5
    1.5k1297133

    先上代码：

    <input type="text" placeholder="测试"/>
input{
                font-size: 25px;
                font-weight: 600;
                color: #666666;
                height: 30px;
                line-height: 30px;
            }
            input::-webkit-input-placeholder{
                color: #999;
                font-size: 12px;
                line-height: 20px;
                padding-bottom: 10px;
            }

    效果如图：

    clipboard.png
    相信大家已经明白我的意思了——如何让placeholder="测试"文字垂直居中？我试了各种能想到的方法，都不行，最后放弃了，写了一个伪输入框

    csshtml
    阅读 6.5k
    3 个回答
    得票最新
    头像
    hfhan
      29k72241
      ✓ 已被采纳

      去掉input::-webkit-input-placeholder中的line-height属性

      补充

      亲自试了下好像不可以，换种方法的话可以用positoon

      input::-webkit-input-placeholder{
  position:relative;
  top:xx px;
}
      头像
      flayPig
        46029

        让Input框里的高度和行高一样就行

        input{
height: 30px;
line-height: 30px;
}
        头像
        Justin
          1.4k41232

          <!DOCTYPE html>
          <html>

          <head>

          <meta charset="utf-8">
<title></title>

          </head>
          <style>

          input {
    width: 200px;
    height: 30px;
    font: 14px/1 "microsoft yahei";
    color: #333;
}

input::-ms-input-placeholder {
    text-align: center;
}

input::-webkit-input-placeholder {
    text-align: center;
}

          </style>

          <body>

          <input placeholder="用户名" /> </body>

          </html>

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题