垂直中心文字在輸入元件

Question

我有以下輸入元件（I故意省略了不是必需的實例屬性）：

<input type="text" style="display: block; height: 40px; font-size: 14px; line-height: 40px"/>

在Chrome和Internet Explorer（可能Opera也是），輸入內的任何文本都將垂直居中。但是，Firefox似乎忽略了這個聲明。改爲將其設置爲display: inline-block;，或者使用vertical-align: middle;在Firefox中不起作用。

我也試着頂部&底部補白設置爲13px，高度至14px，這（與字體大小的組合）將導致元件40px高。這按預期工作;除了任何帶尾巴的字符（如g,q,j等）在底部被切斷。

我正在尋找一種跨瀏覽器解決方案，用於在固定高度的輸入框中垂直對齊文本。輸入元素將具有自己的懸停和焦點樣式，因此通過將元素本身垂直放置在高空中來僞造居中不是真正的選擇。

乾杯

Answer 1

我也試着頂部&底部補白設定爲13像素，並且高度14px的，這（與字體大小的組合）將導致元件40像素高。這按預期工作;除了任何帶有尾巴的字符（如g，q，j等）在底部被切斷。

如何高度僅設置頂部填充，以13像素（不是底部一個），並設置爲剩餘空間，就像這樣：

<input type="text" style="display: block; height: 27px; padding-top: 13px; font-size: 14px">

它按預期工作在Firefox和Chrome中;我目前還沒有訪問IE，但我相信它也可以在IE中使用。