Grow your CSS skills. Land your dream job.

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

  • # February 25, 2010 at 11:40 am

    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?

    Code:

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

    # February 25, 2010 at 1:05 pm

    how about adding extra padding ?

    Code:
    input { height: 40px; /* any help with this css would be appreciated */
    overflow:hidden;
    padding:10px 10px 5px 10px; }
    # February 25, 2010 at 1:26 pm

    I was able to fix this problem in the past by using padding, as psychotronic suggests (you can see the results at http://www.mindmadebooks.com/contact.html). 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.

    # February 27, 2010 at 1:46 am

    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 :

    Code:

    and the css will be look like this

    Code:
    .inputwrapper {
    border:1px solid #666;
    height: 12px;
    overflow:hidden;}

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

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

    # February 27, 2010 at 12:37 pm

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".