Discuss HTML and CSS : vertical alignment in a input box


		Home \| Community \| Developer's Paradise User Groups \| Site Tools \| Site Information \| Search

Main Menu

Forums

SiteExperts.com Forums
All Discussions
SiteExperts Feedback
The Lounge
Dynamic HTML
Site Design/ Critiques
HTML and CSS
XML Technologies
The Wireless Internet
Internet Explorer
Microsoft .NET
The Server
Technical Support

Sponsored Links

User Groups : Forums : SiteExperts : HTML and CSS :

Previous Discussion Next Discussion
vertical alignment in a input box

I have not managed to spot a way to center the text in a input box.. I have changed the height of the box to 40px using the code below..

<input id="uname" style="height:40px; padding-top:10px;" type ="text" Name="userName" />

as you can see the height is 40px and i tried to use vertical-align:middle didnt work

I have tried <input id="uname" style="height:40px; text-align:center;" type ="text" Name="userName" /> this places the cursor in the center center of the txt box.. not vertical left center which is what i want

I noted the box is 40px high so tried padding top:20px this is 40/2 no joy..

so i tried padding-top:10px which moves the cursor 10 px from the top and this is the center I guess the top of the cursor is now 10px from the top.. and that does work..

But I then tried out of curosity padding-bottom:10px; this doesnt work..?

I really didnt want to hard code any numbers just wanted to be able to use a phrase like in a table you can use valign what about for input tags..?

Here is all my code..

To sumarize I would request why does padding-top:10px work where as padding-bottom:10px which in my mind is the same but from the bottom doesnt work..

and why cant there be a phrase like vertical-align or something to do this what it my input box is 45px high 45/2 = 22.5 this then makes the padding bit not accurate..

I just want the cursor to sit on the left vertical center of input box or any input box.?

<html><head><title>longin page</title>
</head>
<body>
<form ACTION="login.php" Method="POST">
<table border ="1" cellspacing ="10" cellpadding="0">
<tr>
<td style ="font-size:16pt; font-family:Arial;">
<label for="uname">
Username:        
</label>
</td>
<td>
<input id="uname" style="height:40px; text-align:center;" type ="text" Name="userName" />
</td>
</tr>
<tr>
<td style ="font-size:16pt; font-family:Arial;">
<label for="pass">Password:        </label>
</td>
<td>
<input id="pass" style="height:40px; padding-top:10px;" type ="password" Name="password"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Login"/ style="font-size:16pt; font-family:Arial;color:white;">
</td>
</tr>
</table>
</form><br/>
</body>
</html>
Started By Laurencek on Feb 7, 2010 at 3:47:47 PM
7 Response(s) | Reply

Earlier Replies | Replies 5 to 7 of 7 | Later Replies
Goto Page: 1
brian on Feb 8, 2010 at 1:59:54 AM (# 5)
I didn't think padding worked with inputs but it does in IE 8. This doesn't mean it works in other browsers however. There is a simple alternative that will work.

create a div where the text box is and include the text box inside it
add an on-click to the div to set focus to the text box
set padding and a border on the div too
turn the border off on the text box

something like this
<div style="border:1px solid black;padding-top:10px;height:40px;" onclick="document.getElementById('pass').focus()">
<input id="pass" type="password" style="border:0px;width:100%;text-align:center;font-size:16px" />
<div>

You'd need to set the width of the div to the size you want. I've checked this out and it works fine, similar to how IE8 appears, and you'll also need to mess with the padding and/or height to get this working and centered vertically. you'll want to check other browsers too.

As far as vertical-align goes, I believe this is only for table cells,inline text within spans and images to replace the html alignment attributes. I got this out of DHTML the Definitive Reference published by O'Reilly, a highly recommended book.
brian on Feb 8, 2010 at 2:02:54 AM (# 6)
aaah, left vertical center, missed that. you need to remove the text-align:center as it's the horizontal centre that it affects.
Laurencek on Feb 8, 2010 at 6:36:36 AM (# 7)
I will check this out thanks It looks like it will work.. Its kind of annoying that xhtml allows you to change the size of the input txt box but then when it gets focus it puts the cursor at the top which is ugly.. Not only that its doesn't provide a way to re center the txt input to the box either by default or by coding it without having to put a division around it etc...

PS does anyone know how what language twiter is writtten in thats where I saw the size large txt boxes and wanted to copy the appearance..
Earlier Replies | Replies 5 to 7 of 7 | Later Replies
Goto Page: 1

To respond to a discussion, you must first logon.

If you are not registered, please register yourself to become a member of the SiteExperts.community.