Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Centering text (vertically) inside a textbox using CSS

Tags:

html

css

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

like image 960
Amit Avatar asked Aug 07 '10 21:08

Amit


People also ask

How do I center text vertically in CSS?

To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.

How do I center text in a box CSS?

To center text in CSS, use the text-align property and define it with the value 'center. ' You can use this technique inside block elements, such as divs.

How do I vertically center text in a div?

Answer: Use the CSS line-height property Suppose you have a div element with the height of 50px and you have placed some link inside the div that you want to align vertically center. The simplest way to do it is — just apply the line-height property with value equal to the height of div which is 50px .


1 Answers

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.

like image 121
Sarfraz Avatar answered Sep 28 '22 17:09

Sarfraz