Verticalement Centre Texte dans un élément d'entrée

Question

Je l'élément d'entrée (I délibérément omis des attributs qui ne sont pas nécessaires pour l'exemple):

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

dans Chrome et Internet Explorer (probablement Opera aussi), tout texte à l'intérieur de l'entrée sera centré verticalement. Cependant, Firefox semble ignorer cette déclaration. Le réglage à display: inline-block; à la place, ou en utilisant vertical-align: middle; n'a aucun effet dans Firefox.

J'ai aussi essayé de placer le fond & top rembourrages à 13px, et la hauteur à 14px, qui (combiné avec la taille de la police) se traduira par un élément 40px grand. Cela fonctionne comme prévu; sauf les caractères avec queues (comme g, q, j etc.) sont coupés en bas.

Je suis à la recherche d'une solution multi-navigateur pour aligner verticalement le texte dans une boîte d'entrée avec une hauteur fixe. L'élément d'entrée aura ses propres styles de pointage et de mise au point, simulant ainsi le centrage en positionnant l'élément lui-même verticalement dans un grand espace n'est pas vraiment une option.

Vive

Answer 1

J'ai aussi essayé de placer le fond & top rembourrages à 13px, et la hauteur de 14px, qui (combiné avec la taille de la police) se traduira par un élément 40px grand. Cela fonctionne comme prévu; sauf les caractères avec des queues (comme g, q, j etc.) sont coupés en bas.

Comment sur la configuration que le rembourrage supérieure à 13px (pas le fond un) et le réglage de la hauteur à l'espace restant, comme celui-ci:

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

Il fonctionne comme prévu à la fois Firefox et Chrome; Je n'ai pas accès à IE pour le moment, mais je suis assez confiant qu'il fonctionne aussi dans IE.