占位符和文本的位置不会在输入文本框中垂直居中

Question

我已经给出了输入文本框的自定义高度，根据该高度我想调整其占位符和文本垂直中间。我也把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">

Answer 1

使用此

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

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

Answer 2

我只是将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">