Tutorial :Centering text (vertically) inside a textbox using CSS



Question:

I'm currently working with a textbox that has a background. I was wondering if it's possible to center text (vertically) inside the textbox.

important: it's perfectly centered in firefox. Only IE it writes it too high for some reason. I've tried line-height, padding, and margin. Nothing works. Any ideas?

EDIT: This is my current CSS. I should say that I've tried the margin-top method and it didn't work for me. Also, as I mentioned, this is only for IE. I have IE specific style sheets so no worries.

.textValue { color: black; font-size: 12px; font-family: David, sans-serif; }  input { width: 110px; padding: 0 2px; padding-right: 4px; height: 20px; border: solid 1px white; margin-bottom: 0px; background: url(../images/contactTextBg.png) no-repeat top right; }  label { float: right; margin-left: 5px; font-size: 13px; }  

For IE, I have the following:

.textValue { font-size: 14px; }  

as for HTML:

            <tr>                  <td><label for="name">name</label></td>                  <td><input type="text" name="name" id="name" class="textValue" value="" /></td>              </tr>  

Thanks, Amit


Solution:1

I wonder how you are able to align the text in a textbox but since you say, here is the suggestion:

For idiot IE, you can use this IE specific hack:

margin-top:50px; /* for standard-compliant browsers */  *margin-top:50px; /* for idiot IE */  _margin-top:50px; /* for idiot IE */  

You might want to try other similar properties if you want rather than margin-top.


Solution:2

Did you try?:

input {vertical-align: middle;}  


Solution:3

I know this one's a bit old, but I've just run into the same problem. The solution given here didn't help me which seemed strange. In my case it was the line height that was set to "1em". Changing the line height to something that resembled the height of the text box, rather than the size of the font it contained was the solution. This also continues to function as expected in Firefox, etc.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »