佔位符和文本的位置不是在輸入文本框中垂直居中

我給出了輸入文本框的自定義高度，並根據該高度來調整其佔位符和文本垂直中間。我也給它的佔位符給了css屬性。我錯過了什麼嗎？先謝謝你。佔位符和文本的位置不是在輸入文本框中垂直居中

.input-lg { 
 
    height: 30px; 
 
    font-size: 14px; 
 
    vertical-align: middle !important; 
 
    line-height: 1.9 !important; 
 
} 
 
.form-control { 
 
    border: 1px solid #c2c2c2; 
 
    border-radius: 1px; 
 
    height: 24px; 
 
    font-size: 12px; 
 
    color: #656466; 
 
    background: #ffffff; 
 
    padding: 0 7px; 
 
     display: block; 
 
    width: 100%; 
 
} 
 
.form-control::-webkit-input-placeholder { 
 
color: #c9c9c9; 
 
font-size: 11px !important; 
 
} 
 
.form-control:-moz-placeholder { 
 
color: #c9c9c9; 
 
font-size: 11px !important; 
 
} 
 
.form-control::-moz-placeholder { 
 
color: #c9c9c9; 
 
font-size: 11px !important; 
 
} 
 
.form-control:-ms-input-placeholder { 
 
color: #c9c9c9; 
 
font-size: 11px !important; 
 
} 
 
.input-lg::-webkit-input-placeholder { 
 
    vertical-align: middle !important; 
 
    line-height: normal !important; 
 
    opacity:1; 
 
} 
 
.input-lg:-moz-placeholder { 
 
    vertical-align: middle !important; 
 
    line-height: normal !important; 
 
    opacity:1; 
 
    
 
} 
 
.input-lg::-moz-placeholder { 
 
    vertical-align: middle !important; 
 
    line-height: normal !important; 
 
    opacity:1; 
 
    
 
} 
 
.input-lg:-ms-input-placeholder { 
 
    vertical-align: middle !important; 
 
    line-height: normal !important; 
 
    opacity:1; 
 
    
 
}

<input class="form-control input-lg" type="text" placeholder="Hint Text">

來源

2016-05-17 sanjay

您使用哪種瀏覽器？對我來說看起來很好。 – Paran0a

@ Paran0a Chrome – sanjay

無法重現。 –

使用此

.input-lg{ 
    line-height:30px; 
    }

小提琴。 https://jsfiddle.net/np4cctmm/

來源

2016-05-17 07:58:24

它仍然不在中間 – sanjay

刪除行高：1.9和行高：正常嗎？ –

小提琴。 https://jsfiddle.net/np4cctmm/ –

我只是增加padding: 0 7px 2px;到輸入

.input-lg { 
 
    height: 30px; 
 
    font-size: 14px; 
 
    vertical-align: middle !important; 
 
    line-height: 1.9 !important; 
 
} 
 
.form-control { 
 
    border: 1px solid #c2c2c2; 
 
    border-radius: 1px; 
 
    height: 24px; 
 
    font-size: 12px; 
 
    color: #656466; 
 
    background: #ffffff; 
 
    padding: 0 7px 2px; 
 
     display: block; 
 
    width: 100%; 
 
} 
 
.form-control::-webkit-input-placeholder { 
 
color: #c9c9c9; 
 
font-size: 11px !important; 
 
} 
 
.form-control:-moz-placeholder { 
 
color: #c9c9c9; 
 
font-size: 11px !important; 
 
} 
 
.form-control::-moz-placeholder { 
 
color: #c9c9c9; 
 
font-size: 11px !important; 
 
} 
 
.form-control:-ms-input-placeholder { 
 
color: #c9c9c9; 
 
font-size: 11px !important; 
 
} 
 
.input-lg::-webkit-input-placeholder { 
 
    vertical-align: middle !important; 
 
    line-height: normal !important; 
 
    opacity:1; 
 
} 
 
.input-lg:-moz-placeholder { 
 
    vertical-align: middle !important; 
 
    line-height: normal !important; 
 
    opacity:1; 
 
    
 
} 
 
.input-lg::-moz-placeholder { 
 
    vertical-align: middle !important; 
 
    line-height: normal !important; 
 
    opacity:1; 
 
    
 
} 
 
.input-lg:-ms-input-placeholder { 
 
    vertical-align: middle !important; 
 
    line-height: normal !important; 
 
    opacity:1; 
 
    
 
}

<input class="form-control input-lg" type="text" placeholder="Hint Text">

來源

2016-05-17 10:00:04

佔位符和文本的位置不是在輸入文本框中垂直居中

回答

相關問題