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

后端 未结 16 2390
Happy的楠姐
Happy的楠姐 2020-12-01 01:27

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?

16条回答
  •  时光说笑
    2020-12-01 01:33

    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;
    }
    

提交回复
热议问题