Aligner verticalement le texte dans le champ de saisie de hauteur fixe sans affichage: table ou padding?

Question

La propriété line-height s'occupe généralement de l'alignement vertical, mais pas des entrées. Est-il possible de centrer automatiquement le texte sans jouer avec le remplissage?

Answer 1

Je n'ai pas essayé moi-même, mais essayez de régler:

 height : 36px; //for other browsers
line-height: 36px; // for IE
 

Où 36px est la hauteur de votre entrée.

Answer 2

Dans Opera 9.62, Mozilla 3.0.4, Safari 3.2 (pour Windows), cela peut aider si vous mettez du texte ou au moins un espace dans la même ligne que le champ de saisie.

 <div style="line-height: 60px; height: 60px; border: 1px solid black;">
    <input type="text" value="foo" />&nbsp;
</div>
 

(imaginez un & nbsp après la déclaration d'entrée)

IE 7 ignore tous les hack CSS que j'ai essayés. Je recommanderais d'utiliser padding pour IE uniquement. Cela devrait vous faciliter la tâche si vous ne devez travailler que dans un navigateur spécifique.

Answer 3

Je sais que je suis en retard à la fête, mais j'espère que cela aidera tous ceux qui recherchent une réponse concise qui fonctionne sur tous les principaux navigateurs (sauf IE6, nous avons décidé de ne plus le prendre en charge, je refuse donc de le regarder encore plus). .

     #search #searchbox {
    height: 21px;
    line-height: 21px;
}
 

à votre santé! JP

Answer 4

Essayez:

 height: 21px;
line-height: 21px; /* FOR IE */
 

Dans certaines versions d’IE (<9), la propriété height n’est pas interprétée correctement.