开发者

Centering text (vertically) inside a textbox using CSS

开发者 https://www.devze.com 2023-01-10 20:33 出处:网络
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.

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


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.


Did you try?:

input {vertical-align: middle;}


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号