4 votes

Centrer verticalement le texte dans un élément de saisie

J'ai l'élément d'entrée suivant (j'ai délibérément omis les attributs qui n'étaient 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 aussi dans Opera), tout texte à l'intérieur de la saisie sera centré verticalement. Cependant, Firefox semble ignorer cette déclaration. En lui donnant la valeur display: inline-block; à la place, ou en utilisant vertical-align: middle; n'a aucun effet dans Firefox.

J'ai également essayé de régler les marges supérieure et inférieure sur 13px et la hauteur à 14px ce qui (combiné à la taille de la police) donnera lieu à un élément 40px grand. Cela fonctionne comme prévu, sauf pour les caractères avec des queues (comme g , q , j etc.) sont coupés en bas.

Je suis à la recherche d'une solution multi-navigateurs pour aligner verticalement le texte d'une zone de saisie dont la hauteur est fixe. L'élément de saisie aura ses propres styles de survol et de mise au point, de sorte qu'il faut simuler le centrage en positionnant l'élément lui-même verticalement dans une zone de texte. 40px le grand espace n'est pas vraiment une option.

Cheers

5voto

Pär Wieslander Points 11258

J'ai également essayé de définir les marges supérieure et inférieure à 13px, et la hauteur à 14px, ce qui (combiné à la taille de la police) donne un élément de 40px de haut. Cela fonctionne comme prévu, sauf que les caractères avec une queue (comme g, q, j, etc.) sont coupés en bas.

Pourquoi ne pas régler uniquement le padding du haut à 13px (pas celui du bas) et régler la hauteur sur 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 pour le moment, mais je suis sûr qu'il fonctionne aussi dans IE.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X