Placeholder is not vertical aligned

Question

I used bootstrap but placeholder is not in center align

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

Inputbox font size is : 20px
Placeholder font size is: 14px

my client doesn't want to change the font size of the input box and placeholder. but if I set it with the same font size then it aligned center.

I want the placeholder to be aligned the center of the text box with a different font size of textbox and placeholder. Please help.

Could you just turn up the brightness of your screen, a little? It's a bit difficult to see the code you've *already tried*... — Geoff James, Oct 18 '16 at 11:25
Possible duplicate of [Placeholder text is not vertically centered in Safari](http://stackoverflow.com/questions/9323596/placeholder-text-is-not-vertically-centered-in-safari) — mplungjan, Oct 18 '16 at 11:29

score 1 · Answer 1 · answered Oct 18 '16 at 12:05

use ::placeholder class in css

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;
}

Please check this link https://jsfiddle.net/xunbfvvh/

Sumit patel · Answer 2 · 2016-10-18T12:16:14.760

using Padding In css

Method-1 : using id

#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;
 }

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

Method-2 : Using Attribute

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;
 }

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

It has been made with the same placeholder and input font size. We need 14px font size in placeholder and 20px font size in input (When user types, it should be 20px font size). — Tejas Rana, Oct 18 '16 at 12:08

Placeholder is not vertical aligned

2 Answers2