Geek Answers Handbook

Center text (vertically) inside a text box using CSS

I am currently working with a text box that has a background. I was wondering if it is possible to center the text (vertically) inside the text box.

important : it is ideally concentrated in firefox. Only IE for some reason writes too much. I tried the line-height, margins and margins. Nothing works. Any ideas?

EDIT: This is my current CSS. I have to say that I tried the margin-top method and it did not work for me. Also, as I mentioned, this is for IE only. I have special IE style sheets so don't worry.

.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

+6
html css textbox
source share
3 answers

I wonder how you can align text in a text box, but as you say, here is a sentence:

For idiot IE, you can use this IE 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 .

+7
source share

You tried?:

 input {vertical-align: middle;}
+2
source share

I know this is a bit outdated, but I just ran into the same problem. The solution given here did not help me, which seemed strange. In my case, it was the height of the line that was set to "1em". The solution was to change the line height to something that resembled the height of the text field, not the font size. It also continues to function as expected in Firefox, etc.

+2
source share

More articles: