INPUT要素で垂直センターテキスト
https://stackoverflow.com/questions/2222019
-
19-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私は、次の入力要素を有している（私は意図的に、例えば必要はなかった属性を省略）：
<input type="text" style="display: block; height: 40px; font-size: 14px; line-height: 40px"/>
ChromeとInternet Explorerの（あまりにもおそらくオペラ）では、入力内の任意のテキストを垂直方向に中央揃えされます。しかし、Firefoxはこの宣言を無視しているようです。代わりにdisplay: inline-block;に設定する、またはvertical-align: middle;を使用すると、Firefoxでも効果はありません。
私はまた13pxするトップ＆ボトムパディングを設定しようとした、と（フォントサイズと組み合わせる）は、14pxする高さは、背の高い素子40pxをもたらすであろう。予想されるように、これは動作します。尾を持つ任意の文字以外（ G のような、 Q 、 J 等）が底部で切断されている。
私は垂直固定の高さと、入力ボックス内のテキストを整列させるためのクロスブラウザのソリューションを探しています。入力要素は、独自のホバーを持っているとスタイルを集中するので、40px背の高い空間に垂直要素自体を配置することにより、センタリングを偽造することは本当にオプションではありませんされます。
乾杯
解決
私はまた、要素トール40ピクセルになります（フォントサイズと組み合わせて）14pxにトップ＆ボトムパディング13pxに、高さを設定しようとしました。予想されるように、これは動作します。 （G、Q、j個等のような）テールを有する任意の文字以外は底部で切断されている。
どのようにこのように、残りのスペースに高さを13pxにのみトップパディング（ない下の1）を設定し、設定について：
<input type="text" style="display: block; height: 27px; padding-top: 13px; font-size: 14px">FirefoxとChromeの両方で期待どおり
これは動作します。私は現時点ではIEへのアクセス権を持っていないが、私はそれがあまりにもIEで動作し、かなり確信しています。
