鍍金池/ 問答/HTML/ 輸入框提示文字的居中問題

輸入框提示文字的居中問題

先上代碼：

<input type="text" placeholder="測(cè)試"/>
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
相信大家已經(jīng)明白我的意思了——如何讓placeholder="測(cè)試"文字垂直居中？我試了各種能想到的方法，都不行，最后放棄了，寫了一個(gè)偽輸入框

回答
編輯回答
陌顏

<!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>

2018年9月20日 02:17
編輯回答
疚幼

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

補(bǔ)充

親自試了下好像不可以，換種方法的話可以用positoon

input::-webkit-input-placeholder{
  position:relative;
  top:xx px;
}
2017年11月9日 03:58
編輯回答
不舍棄

讓Input框里的高度和行高一樣就行

input{
height: 30px;
line-height: 30px;
}
2017年3月30日 01:37