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

[devil-named-adam]

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 */ }

[psychotronic]

how about adding extra padding ?

Code:

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

[Nipperkin]

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.

[psychotronic]

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

[Nipperkin]

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. :)

[Author]

Posts