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

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

1> 小智..：

---

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

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

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

希望有所帮助.

---

尽管这有效,但最初的问题是如何在没有填充的情况下解决这个问题.

---

添加行高:42px; //对于IE

2> Chris Hawes..：

---

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

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

36px是您输入的高度.

---

实际上,行高属性解决了IE中的问题.我认为这是最简单的方法.

3> Gerhard Dinh..：

---

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

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

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

---

-1这会对齐输入字段,而不是输入字段中的文本.

4> JimP..：

---

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

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

干杯!J.P