Vertically center text in text input in IE9 + IE10

Question

example here: http://jsfiddle.net/D7v2Y/

In firefox/webkit this works great. The text is centered. Not in IE10 or IE9

input {
    display: block;
    box-sizing: border-box;
    line-height: 50px;
    height: 50px;
    padding: 10px;
}

What's goin' on here and how do I get the text input to display "correctly" with the text vertically centered in IE?

Thank you!

Answer 1

You need to reconcile the padding and line-height. With box-sizing: border-box, they are essentially fighting for the same real estate.

In other words, you are saying "fit 50px of line height into 50px of total vertical space, but also pad it by 20px".

A simple solution is to reduce the line-height so that padding * 2 + line-height = 50px. Or, if you want more line-height, reduce the padding. If you want to keep the same line-height and padding, increase the height to 70px.

Example: http://jsfiddle.net/D7v2Y/11/

input {
    display: block;
    box-sizing: border-box;
    line-height: 30px;
    height: 50px;
    padding: 10px;
}

Answer 2

I added a font-size and that seem to do the trick:

input {
    display: block;
    box-sizing: border-box;
    line-height: 1.0;
    font-size: 20px;
    height: 50px;
    padding: 10px;
}

A bit odd... but it seems to be one way of doing it.

Fiddle: http://jsfiddle.net/audetwebdesign/Y2rd4/

Box Sizing

I noticed that the box-sizing property computes a different height in IE10/9 compared to Firefox. If you omit that property, the input field renders more similarly.