In IE7 or IE8 you will find there are problems with CSS settings which work very well in other browsers. I’ve encountered the input box text vertical alignment issues recently in IE.

As the image shown below, the text of the input box vertically aligned in the center automatically in Chrome, Firefox (and maybe IE9+).

Chrome:

Firefox:

However, it is aligned to the bottom in IE9 or below:

Assume the input box in this example has a fixed height:

<input type="text" value="Search" />

.text {
height: 50px;
font-size: 12px;
}


To make the text vertically aligned in the center in IE browsers, you could simply set the line-height CSS property to the same height as of the element. In this example, it is line-height: 50px.

.text {
height: 50px;
line-height: 50px;
font-size: 12px;
}


Find other answers of Incorrect vertical alignment in ie8 and How to vertical align text on input box for ie on Stack Overflow.