Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Vertically center text in a text input field
Old 07-10-2008, 01:48 PM Vertically center text in a text input field
Novice Talker

Posts: 5
Name: Evan Wiener
Trades: 0
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:

Code:
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.
Attached Images
File Type: gif Picture-1.gif (3.1 KB, 3 views)
wienerdog1027 is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 07-10-2008, 02:00 PM Re: Vertically center text in a text input field
wayfarer07's Avatar
Poo on You

Latest Blog Post:
Introducing WowWindow
Posts: 3,987
Name: Abel Mohler
Location: Asheville, North Carolina USA
Trades: 0
Remove the height: 2em, and put an equal amount of padding on all sides.
__________________
I build web things. I work for the startup
Please login or register to view this content. Registration is FREE
.
wayfarer07 is online now
Reply With Quote
View Public Profile Visit wayfarer07's homepage!
 
Old 07-10-2008, 02:08 PM Re: Vertically center text in a text input field
Novice Talker

Posts: 5
Name: Evan Wiener
Trades: 0
Quote:
Originally Posted by wayfarer07 View Post
Remove the height: 2em, and put an equal amount of padding on all sides.
Should I put the padding in ems, or pixels?
wienerdog1027 is offline
Reply With Quote
View Public Profile
 
Old 07-10-2008, 02:10 PM Re: Vertically center text in a text input field
wayfarer07's Avatar
Poo on You

Latest Blog Post:
Introducing WowWindow
Posts: 3,987
Name: Abel Mohler
Location: Asheville, North Carolina USA
Trades: 0
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.
__________________
I build web things. I work for the startup
Please login or register to view this content. Registration is FREE
.
wayfarer07 is online now
Reply With Quote
View Public Profile Visit wayfarer07's homepage!
 
Old 07-10-2008, 03:22 PM Re: Vertically center text in a text input field
Novice Talker

Posts: 5
Name: Evan Wiener
Trades: 0
Quote:
Originally Posted by wayfarer07 View Post
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!
wienerdog1027 is offline
Reply With Quote
View Public Profile
 
Old 08-04-2008, 11:13 AM Re: Vertically center text in a text input field
Junior Talker

Posts: 1
Name: Jonathan
Trades: 0
Just use this attribute within your input field tag.

style="text-align:center"

or add it to your style sheet. Easy as that.
JonnyFive is offline
Reply With Quote
View Public Profile
 
Old 08-04-2008, 11:38 AM Re: Vertically center text in a text input field
wayfarer07's Avatar
Poo on You

Latest Blog Post:
Introducing WowWindow
Posts: 3,987
Name: Abel Mohler
Location: Asheville, North Carolina USA
Trades: 0
lol.... not. The question was about vertical centering, not horizontal centering. Thanks for chipping in though.
__________________
I build web things. I work for the startup
Please login or register to view this content. Registration is FREE
.
wayfarer07 is online now
Reply With Quote
View Public Profile Visit wayfarer07's homepage!
 
Reply     « Reply to Vertically center text in a text input field
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.42811 seconds with 13 queries