PDA

Click to See Complete Forum and Search --> : How do you vertically center content in a text input box?


wienerdog
07-10-2008, 04:26 PM
I'm trying to figure out a way to vertically center the text that a user inserts into a text input field. I styled the input box with the following CSS:

input.field_entry {
border:1px solid #B1B1B1;
border-top:2px solid #B1B1B1;
height:2em;
display:block;
margin-bottom:10px;
min-width:4.5em;
}

input.field_entry:focus, input.sffocus {
border-color:#F2882B;
}


Any suggestions?

Drazan
07-10-2008, 06:21 PM
line-height: 130% ;

you can use percent, em, px, or any measurement. Adjust as needed.

wienerdog
07-10-2008, 06:28 PM
line-height: 130% ;

you can use percent, em, px, or any measurement. Adjust as needed.

That didn't seem to cause any change. Weird.

tZ
07-10-2008, 08:06 PM
Use padding rather than setting an absolute height.

CSS

input.field_entry {
border:1px solid #B1B1B1;
border-top:2px solid #B1B1B1;
padding: .5em 0;
display:block;
margin-bottom:10px;
min-width:4.5em;
}

input.field_entry:focus, input.sffocus {
border-color:#F2882B;
}

wienerdog
07-31-2008, 08:42 PM
I never got back to this. Yeah, that worked. Thanks!