web-dev-qa-db-fra.com

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

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?

cssxhtml
71
Logan Serman

Dans Opera 9.62, Mozilla 3.0.4, Safari 3.2 (pour Windows), cela aide 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 un remplissage pour IE uniquement. Cela devrait vous faciliter la tâche si vous ne devez travailler que dans un navigateur spécifique.

10
Gerhard Dinhof

J'ai rencontré ce problème moi-même. J'ai constaté que le fait de ne pas spécifier une hauteur d'entrée, mais d'utiliser à la fois la hauteur de police et le remplissage, donne un texte aligné verticalement.

Par exemple, supposons que vous souhaitiez avoir une zone de saisie de 42 pixels de haut, avec une taille de police de 20 pixels. Vous pouvez simplement trouver la différence entre la hauteur d’entrée et la taille de la police, la diviser par deux et définir votre remplissage à cette valeur. Dans ce cas, vous auriez une valeur de remplissage totale de 22px, soit 11px de chaque côté.

<input type="text" style="padding: 11px 0px 11px 0px; font-size: 20px;" />

Cela vous donnerait une boîte de saisie haute de 42px avec un alignement vertical parfait.

J'espère que cela pourra aider.

97

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.

60
Chris Hawes

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 l'examiner plus avant). .

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

à la vôtre! JP

6
JimP
input[type=text]
{
   height: 15px; 
   line-height: 15px;
}

c'est la bonne façon de définir la position médiane verticale.

3
Web Designer cum Promoter

À mon avis, la réponse sur cette page avec le plus grand nombre de votes est la meilleure, mais ses calculs étaient erronés et je ne pouvais pas en parler.

J'avais besoin d'une zone de saisie de texte d'une hauteur exacte de 40 pixels, avec une bordure de 1 pixel tout autour. Bien sûr, je voulais que le texte soit aligné verticalement au centre de tous les navigateurs.

Bordure de 1 pixel en haut
1 pixel border bottom
8 pixel de remplissage supérieur
Fond de 8 pixels
22 pixels de taille

1 + 1 + 8 + 8 + 22 = 40 pixels exactement.

Une chose à retenir est que vous devez supprimer votre propriété CSS CSS ou ces pixels seront ajoutés à votre total ci-dessus.

<input type="text" style="padding-top:8px; padding-bottom:8px; margin: 0; border: solid 1px #000000; font-size:22px;" />

Cela fonctionne dans Firefox, Chrome, IE 8 et Safari. Je ne peux que supposer que si quelque chose de simple comme celui-ci fonctionne dans IE8, il devrait fonctionner de la même manière dans 6, 7 et 9, mais je ne l’ai pas testé. Faites-le moi savoir et je modifierai ce post en conséquence.

3
Sparky

Essayez:

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

Parce que sur certaines versions de IE (<9), la hauteur de la propriété n'est pas interprétée correctement.

2
Gew

Après de nombreuses recherches et de nombreuses frustrations, nous avons opté pour une combinaison de réglage de hauteur, hauteur de ligne et absence de remplissage lors de l’utilisation d’une image d’arrière-plan à hauteur fixe (24 pixels) pour un champ de saisie de texte.

.form-text {
    color: white;
    outline: none;
    background-image: url(input_text.png);
    border-width: 0px;
    padding: 0px 10px 0px 10px;
    margin: 0px;
    width: 274px;
    height: 24px;
    line-height: 24px;
    vertical-align: middle;
}
1
user275649

L'alignement vertical intérieur dépendra de la hauteur de la police et de la hauteur de saisie. Vous pouvez donc l'ajuster à l'aide du rembourrage !!! 

Essayez quelques comme:

.InVertAlign {
   height: 40px;
   line-height: 40px;
   font-size: 2em;
   padding: 0px 14px 3px 5px;
}

...

<input type="text" class="InVertAlign" />

N'oubliez pas d'ajuster les valeurs sur la classe css en fonction de vos besoins!

0
Diego Favero

Optez pour line-height.

La balise vertical-align fonctionne correctement pour le bouton d'envoi, mais pas pour le texte du champ de saisie . Régler line-height à la hauteur du champ de saisie fonctionne avec tous les navigateurs. Incl IE7.

0
Peter Waegemans

En retard pour le parti, mais les réponses actuelles ne fonctionneront pas si vous avez la taille de la boîte: border-box set (ce que beaucoup de gens font pour les éléments de formulaire de nos jours).

Il suffit de réinitialiser la taille de la boîte pour IE8 sur box-sizing: content-box;, puis d’utiliser l’une des réponses padding/height.

0
GusRuss89

C'est comme ça que je le fais.

<ul>
   <li>First group of text here.</li>
   <li><input type="" value="" /></li>
</ul>

puis dans votre fichier CSS, 

ul li {
  display: block;
  float: left;
}

Cela devrait fonctionner pour vous.

0
Morningseven

Ne définissez simplement pas la hauteur de la zone de saisie, définissez uniquement la taille de la police, ce sera ok

0
imikay