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

I tried line-height:130%, but that didn't seem to work.

Remove the height: 2em, and put an equal amount of padding on all sides.

Originally Posted by wayfarer07

Remove the height: 2em, and put an equal amount of padding on all sides.

Should I put the padding in ems, or pixels?

Whatever pleases you. I prefer ems, but only because I design all of my layouts around them. If the font inside of the input field is specified in px, use px.

Originally Posted by wayfarer07

Whatever pleases you. I prefer ems, but only because I design all of my layouts around them. If the font inside of the input field is specified in px, use px.

Great, thanks for the help!

Just use this attribute within your input field tag.

style="text-align:center"

or add it to your style sheet. Easy as that.

lol.... not. The question was about vertical centering, not horizontal centering. Thanks for chipping in though.