占位符不是垂直对齐的

Question

我使用了bootstrap但占位符不在中心对齐

<input id="findNearestClinicText" type="text" placeholder="ENTER YOUR ZIP CODE">

输入框字体大小为：20px
占位符字体大小为：14px

我的客户端不想更改输入框和占位符的字体大小。但如果我用相同的字体大小设置它，那么它就会对齐中心。

我希望占位符与文本框的中心对齐，使用不同的文本框和占位符字体大小。请帮忙。

Answer 1

在css中使用填充

方法1 ： 使用ID

＆＃13;

＆＃13;

#findNearestClinicText
{
  padding:10px;
  font-size:20px;/* Inputbox font size*/
}

/* Placeholder font size is: 14px */    
   #findNearestClinicText::-webkit-input-placeholder { 
   font-size: 14px;
 }
#findNearestClinicText::-moz-placeholder { 
  font-size: 14px;
 }
#findNearestClinicText::-ms-input-placeholder { 
  font-size: 14px;
 }
#findNearestClinicText::-moz-placeholder { 
 font-size: 14px;
 }

＆＃13;

<input id="findNearestClinicText" type="text" placeholder="ENTER YOUR ZIP CODE">

＆＃13;

＆＃13;

＆＃13;

方法-2： 使用属性

＆＃13;

＆＃13;

input[type='text']
{
  padding:10px;
   font-size:20px;/* Inputbox font size*/
}
/* Placeholder font size is: 14px */

   input[type='text']::-webkit-input-placeholder { 
   font-size: 14px;
 }
   input[type='text']::-moz-placeholder { 
  font-size: 14px;
 }
input[type='text']::-ms-input-placeholder { 
  font-size: 14px;
 }
input[type='text']::-moz-placeholder { 
 font-size: 14px;
 }

＆＃13;

<input id="findNearestClinicText" type="text" placeholder="ENTER YOUR ZIP CODE">

＆＃13;

＆＃13;

＆＃13;

Answer 2

在css中使用:: placeholder class

CSS

#findNearestClinicText{
width: 400px;
font-size: 20px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 text-align:center;
 font-size: 14px;
}
::-moz-placeholder { /* Firefox 19+ */
   text-align:center;
   font-size: 14px;
}
:-ms-input-placeholder { /* IE 10+ */
   text-align:center;
   font-size: 14px;
}
:-moz-placeholder { /* Firefox 18- */
   text-align:center;
   font-size: 14px;
}

请查看此链接https://jsfiddle.net/xunbfvvh/