使用CSS在文本框内居中(垂直)文本

时间:2010-08-07 21:56:42

标签: html css textbox

我目前正在使用具有背景的文本框。我想知道是否可以将文本(垂直)置于文本框内。

重要:它完全集中在firefox中。只有IE它出于某种原因写得太高了。我已经尝试过行高,填充和边距。什么都行不通。有什么想法吗?

编辑:这是我目前的CSS。我应该说我已经尝试过margin-top方法而且它对我不起作用。另外,正如我所提到的,这只适用于IE。我有IE特定的样式表,所以不用担心。

.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; }

对于IE,我有以下内容:

.textValue { font-size: 14px; }

对于HTML:

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

谢谢, 阿米特

3 个答案:

答案 0 :(得分:7)

我想知道你是如何在文本框中对齐文本的,但是既然你说,这是建议:

对于idiot IE,你可以使用这个特定于IE的黑客:

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

如果您需要,可能需要尝试其他类似的属性,而不是margin-top

答案 1 :(得分:2)

你试过吗?:

input {vertical-align: middle;}

答案 2 :(得分:2)

我知道这个有点旧,但我遇到了同样的问题。这里给出的解决方案并没有帮助我,这似乎很奇怪。在我的例子中,行高是设置为“1em”。将行高改为类似于文本框高度的东西,而不是它所包含的字体大小是解决方案。这也在Firefox等中继续正常运行。