Alignez verticalement le texte dans le champ entrée de hauteur fixe sans display: table ou de rembourrage?

La propriété line-height prend habituellement soin de l'alignement vertical, mais pas avec les entrées. Est-il un moyen de centrer automatiquement le texte sans avoir à jouer avec rembourrage?

Sans jouer avec rembourrage? Pas en mon expérience. Si vous souhaitez rendre (presque) la même manière sur tous les navigateurs, j'ai trouvé que l'utilisation de remplissage est nécessaire.

InformationsquelleAutor Logan Serman | 2008-11-28

css xhtml

11

Dans Opera 9.62, Mozilla firefox 3.0.4, Safari 3.2 (pour Windows) il aide, si vous mettez un peu de 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 l'entrée-déclaration)

IE 7 ignore tous les CSS hack j'ai essayé.
Je recommande l'utilisation de rembourrage pour IE seulement. Devrait rendre plus facile pour vous de le positionner correctement si elle n'a qu'à travailler au sein d'un navigateur spécifique.
- -1 Cela permet d'aligner le champ de saisie, pas le texte dans le champ de saisie.
- Voir Chris Hawes réponse ci-dessous pour la réponse correcte.
- text-align: center; Appliqué cette CSS de textfield et il a travaillé pour moi
InformationsquelleAutor Gerhard Dinhof
97

J'ai rencontré ce problème moi-même. J'ai trouvé que de ne pas spécifier une entrée de hauteur, mais à l'aide de la police de la hauteur et de rembourrage combinés, les résultats en alignés verticalement du texte.

Par exemple, disons que vous voulez avoir un 42px haut d'entrée de la boîte, avec une taille de police de 20px. Vous pouvez simplement trouver la différence entre l'entrée de la hauteur et la taille de police, la diviser par deux, et de définir votre rembourrage à ce montant. Dans ce cas, vous auriez 22px valeur totale de rembourrage, qui est 11px sur chaque côté.
```
<input type="text" style="padding: 11px 0px 11px 0px; font-size: 20px;" />
```
Qui vous donnerait un 42px haut d'entrée de la boîte avec un parfait alignement vertical.

Espère que ça aide.
- Même si cela fonctionne, la question initiale était de savoir comment résoudre ce sans rembourrage.
- Ajouter line-height: 42px; // pour IE
- Comme l'a noté Micros, cela fonctionne, mais la question initiale était de savoir comment le faire sans rembourrage, ce qui ne semble pas être possible. Je crois que Chris Hawes réponse est la solution la plus simple, et il ne nécessite pas l'utilisation de rembourrage.
- Parfois, vous avez besoin explicite de la hauteur, auquel cas le faire avec un rembourrage n'est pas acceptable. Bien que cela fonctionne, il ne tient pas compte de cette situation (qui est ce que la question posée). Voir Chris Hawes réponse ci-dessous pour la réponse correcte sans rembourrage (c'est à dire "line-height").
InformationsquelleAutor
62

Je n'ai pas essayé moi-même, mais essayez de définir:
```
height : 36px; //for other browsers
line-height: 36px; //for IE
```
Où 36px est à la hauteur de votre entrée.
- En fait la propriété line-height résolu le problème sous IE. Je pense que c'est le moyen le plus facile.
- Le seul problème que je vois, c'est si vous avez de l'habillage du texte.
InformationsquelleAutor Chris Hawes
6

Je sais je suis en retard à la fête, mais j'espère que cela va aider ceux qui cherchent une réponse concise qui fonctionne dans tous les principaux navigateurs (sauf IE6, nous avons décidé d'arrêter le support de ce navigateur, donc je refuse même de le regarder plus).
```
    #search #searchbox {
    height: 21px;
    line-height: 21px;
}
```
cheers!
JP

InformationsquelleAutor JimP
3

À mon avis, la réponse sur cette page avec le plus de votes est la meilleure réponse, mais sa mathématiques était mal et je ne pouvais pas commenter.

J'avais besoin d'une zone de saisie de texte pour être exactement 40 pixels de haut, y compris une bande de 1 pixel dans tous les sens. Bien sûr, je voulais le texte verticalement alignés dans le centre dans tous les navigateurs.

Bande de 1 pixel en haut

Bande de 1 pixel en bas

8 pixels de haut rembourrage

8 pixel remplissage en bas

22 pixels taille de la police

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

Une chose à retenir est que vous devez supprimer de votre css hauteur de biens ou de ces pixels sont 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 peux seulement supposer que si quelque chose de simple comme cela fonctionne dans IE8, il devrait fonctionner de la même façon dans 6, 7, et 9, mais je ne l'ai pas testé. S'il vous plaît laissez-moi savoir et je vais éditer ce post en conséquence.
- I can only assume that if something simple like this is working in IE8, it should work similarly in 6, 7 - il y A BEAUCOUP de choses très simples (par des normes d'aujourd'hui au moins) que le travail (même si les demi-assedly) dans IE8, mais sont impossibles dans IE6, ou même 7. Pour rappel, IE6 ne prend pas en charge autant que position: fixed ou même transparent Png.
InformationsquelleAutor Sparky
3
```
input[type=text]
{
   height: 15px; 
   line-height: 15px;
}
```
c'est la bonne façon de fixer à la verticale-en position intermédiaire.
- Cette solution a déjà été donnée dans plusieurs réponses quand vous avez publié cette.
InformationsquelleAutor Web Designer cum Promoter
2

Essayer :
```
height: 21px;
line-height: 21px; /* FOR IE */
```
Parce que sur certaines versions d'IE (< 9) la propriété de la hauteur n'est pas correctement interprété.
- Cette solution a déjà été donnée dans plusieurs réponses quand vous avez publié cette.
InformationsquelleAutor Gew
1

Après beaucoup de recherches et de frustration qu'un combo de réglage de hauteur de, hauteur de ligne et pas de rembourrage a fonctionné pour moi lors de l'utilisation d'une hauteur fixe (24px) image d'arrière-plan 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;
}
```
- vertical-align permettra d'aligner l'élément d'entrée par rapport à son parent, et non l'intérieur.
InformationsquelleAutor
1

Aller pour line-height.

La vertical-align balise fonctionne très bien pour le bouton soumettre, mais pas pour le texte dans le champ de saisie.
Réglage line-height à la hauteur de la zone de saisie fonctionne sur tous les navigateurs. Incl IE7.

InformationsquelleAutor Peter Waegemans
0

Il suffit de ne pas régler la hauteur de la zone de saisie, définir la taille de police, qui sera ok

InformationsquelleAutor imikay
0

C'est comment je le fais.
```
<ul>
   <li>First group of text here.</li>
   <li><input type="" value="" /></li>
</ul>
```
puis à l'intérieur de votre fichier CSS,
```
ul li {
  display: block;
  float: left;
}
```
Qui devrait fonctionner pour vous.
- Vous n'avez pas besoin de 'display: block" quand il est utilisé avec 'float'. Rappelez-vous float = bloc.
InformationsquelleAutor Morningseven
0

La fin de la partie, mais le courant les réponses ne fonctionnera pas si vous avez box-sizing: border-box set (dont beaucoup de gens ne pour former des éléments de ces jours).

Juste réinitialiser la zone de la taille pour IE8 pour box-sizing: content-box; puis utilisez l'une des padding /hauteur de la réponse.

InformationsquelleAutor GusRuss89
0

L'intérieur de l'alignement vertical dépendra de la hauteur de la police et de l'entrée de hauteur, donc, il peut être ajusté à l'aide de rembourrage !!!

Essayer certains l'aiment :
```
.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 de la classe css en fonction de vos besoins !

InformationsquelleAutor Diego Favero
-1

Désolé à l'avance la réponse simple...

Juste retirer votre titre de texte et l'utilisation de l'entrée de l'espace réservé pour votre étiquette de titre. Certains visuels et de travail css et votre formulaire sera tendue et conviviale. Je suis conscient des inconvénients, mais ce ne sera totalement soulager l'alignement de la lutte.

Je suis réellement à la construction d'un maintenant qui comprend plusieurs étapes et css barre de progression dans WordPress...basé sur le très populaire Formulaire de Contact 7 plugin et il semble grand. Laissez-moi savoir si vous voulez une capture d'écran.

Cheers!

LaddtheImpaler

InformationsquelleAutor LaddtheImpaler
-11

Si votre élément est un élément de bloc contenu/ou avec l'affichage comme suit:
```
display: table-cel
```
Ou, avec une ligne fixe-hauteur, vous pouvez définir la verticale aligner comme suit:
```
Vertical-Align: Middle;
```
Il ne fonctionnera pas pour les autres cas, mais il fonctionne très bien sur ces conditions.
- Cela ne fonctionne que dans les éléments de bloc avec display: table-cell, ou des blocs avec un fixe line-height.
InformationsquelleAutor MPS

Vous devez vous connecter pour publier un commentaire.