We need bigger text inputs for our forms, so easy enough, we just set the height on them... But Firefox 3.5 then keeps the text at the top. How do I vertically center it? On Firefox 3.6, IE8, Chrome and Safari, the text is vertically centered as I hoped.

  <input type="text" style="height: 50px"/>

How do I make the text in this form centered in its input box?

2 answers

danwellman 5600

Have you tried setting an explicit padding-top on the inputs and factoring this into the height? All browsers should use this padding so fixing it for FF3.5 shouldn't* screw things up for other browsers

* I say shouldn't because I don't have FF3.5 and I'm not downgrading just to test this! But it should be ok...

Answered over 7 years ago by danwellman
  • What happens is FF3.6 pushes the text down any extra padding you provide. So padding-top makes FF3.5 look better at FF3.6's expense... But you were right that padding-top works as you said on FF3.5, chrome and safari. Scott Mueller over 7 years ago
  • That's unfortunate - I would expect the specified padding top to replace any padding added by the browser (as it seems to in other browsers) and not add to it which appears to be the case. Are you using a reset.css to initially nuetralise all inputs to 0 padding? danwellman over 7 years ago

You could try setting the line-height to the height of the container.

Answered over 7 years ago by Nathan DeGruchy
  • line-height has no effect whatsoever on input text fields in FF3.5 Scott Mueller over 7 years ago