The line-height property usually takes care of vertical alignment, but not with inputs. Is there a way to automatically center text without playing around with padding?
After much searching and frustration a combo of setting height, line height and no padding worked for me when using a fixed height (24px) background image for a text input field.
.form-text {
color: white;
outline: none;
background-image: url(input_text.png);
border-width: 0px;
padding: 0px 10px 0px 10px;
margin: 0px;
width: 274px;
height: 24px;
line-height: 24px;
vertical-align: middle;
}