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 (Opera probablement aussi), tout texte contenu dans l'entrée sera centrée verticalement. Cependant, Firefox semble ignorer cette déclaration. Réglage à display: inline-block; au lieu ou à l'aide vertical-align: middle; n'a pas d'effet dans Firefox.

J'ai aussi essayé de placer les rembourrages du haut et du bas à 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; à l'exception des caractères avec des queues (comme g , q , j etc) sont coupés en bas.

Je suis à la recherche d'une solution multi-navigateur pour le texte en alignant verticalement dans une boîte d'entrée avec une hauteur fixe. L'élément d'entrée aura son propre vol stationnaire et les styles se concentrer, si truquer le centrage en positionnant l'élément lui-même verticalement dans un espace 40px grand est pas vraiment une option.

Vive

Answer 1

  

J'ai aussi essayé de placer le rembourrages haut et en bas à 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; à l'exception des caractères avec des queues (comme g, q, j, etc.) sont coupés en bas.

Que diriez-vous que le rembourrage réglage supérieure à 13px (pas celui du bas) et réglage de la hauteur de l'espace restant, comme ceci:

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

Il fonctionne comme prévu dans Firefox et Chrome; Je n'ai pas accès à IE au moment, mais je suis tout à fait confiant cela fonctionne dans IE aussi.