在固定高度的输入字段中垂直对齐文本而不显示:table或padding？

Question

行高属性通常负责垂直对齐,但不考虑输入.有没有办法自动居中文本而不玩填充？

Answer 1

我自己遇到了这个问题.我发现没有指定输入高度,但使用font-height和padding组合,会产生垂直对齐的文本.

例如,假设您想要一个42px高的输入框,字体大小为20px.您可以简单地找到输入高度和字体大小之间的差异,将其除以2,并将填充设置为该数量.在这种情况下,您将获得22px的总填充量,每侧为11px.

<input type="text" style="padding: 11px 0px 11px 0px; font-size: 20px;" />

这将为您提供一个42px高的输入框,具有完美的垂直对齐.

希望有所帮助.

Answer 2

我自己没试过,但尝试设置:

height : 36px; //for other browsers
line-height: 36px; // for IE

36px是您输入的高度.

Answer 3

在Opera 9.62,Mozilla 3.0.4,Safari 3.2(适用于Windows)中,如果您在输入字段的同一行中放置一些文本或至少一个空格,它会有所帮助.

<div style="line-height: 60px; height: 60px; border: 1px solid black;">
    <input type="text" value="foo" />&nbsp;
</div>

(想象一下输入语句之后)

IE 7忽略了我试过的每一个CSS hack.我建议只使用填充IE.如果只需要在一个特定的浏览器中工作,就应该更容易正确定位它.

Answer 4

我知道我已经迟到了派对,但希望这能帮助任何人寻找能在所有主流浏览器上工作的简洁答案(除了IE6,我们已经决定停止支持该浏览器,所以我不再看它了) .

    #search #searchbox {
    height: 21px;
    line-height: 21px;
}

干杯!J.P