Alex Rivera | Logout

Vertically align text within input field of fixed-height without display: table or padding?

Asked 2008-11-28T20:51:36.097
85

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?

css xhtml
Edit
Report

2 Answers

63

I've not tried this myself, but try setting:

height : 36px; //for other browsers
line-height: 36px; // for IE

Where 36px is the height of your input.

answered 2008-11-29T13:05:19.657
1

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;
}
answered 2010-02-17T22:43:30.810

Your Answer