The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Vertical Text Align (Line Height) in Text Input

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #28148

    Hi all,

    I’m looking for a nice cross-browser solution to solve my line-height problem in text inputs. The text seems to stick to the top of the input but I would like it nicely in the middle (vertically aligned).

    Using vertical-align merely aligns the input tag with other elements on the page but not the text inside the input. line-height doesn’t seem to have an effect either.

    Any ideas my CSS-loving friends?


    /* css */
    body { font-size: 14px; }
    input { height: 40px; /* any help with this css would be appreciated */ }


    how about adding extra padding ?

    input { height: 40px; /* any help with this css would be appreciated */
    padding:10px 10px 5px 10px; }

    I was able to fix this problem in the past by using padding, as psychotronic suggests (you can see the results at Interestingly though, I’m currently designing a WP theme and am wanting to fix the same problem in the WP search form, only when I add padding to do so, the height and width of the search input field increases. :o I’m not sure what the heck is going on there but will persevere.

    d-n-a, why not try to use padding and see how it works? Report back and let us know.


    alternatively, there’s another solution, but it’s a bit tricky.

    Creave a div wrapper for your input, give the div a solid border, then remove the input field border

    the html code will be look like this :


    and the css will be look like this

    .inputwrapper {
    border:1px solid #666;
    height: 12px;

    .myinput {
    margin:10px 0 0 0;}

    well actually i haven’t tested the code yet :p but just try it ;)


    That’s an interesting solution, psychotronic, thanks for pointing it out. In the meanwhile, I solved my problem of the input field expanding to acomodate the padding I’m adding to center the text within the field: I reduced the height/length of the field by the same number of added padding pixels, and the field returns to the appropriate size. :)

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.