html aligner verticalement le texte dans le bouton de type entrée

Question

J'essaie de créer un bouton d'une hauteur de 22px, et que le texte à l'intérieur du bouton soit aligné verticalement au centre du bouton. J'ai tout essayé, mais je n'arrive pas à trouver comment faire.

comment cela peut-il être fait ?

UPDATE : Voici mon code :

CSS :

.test1 label {
    float: left;
    clear: left;
    width:31%;
    margin-right:-2px;
}
.test1 input {
    float:left;
    width:69%;
    margin-right:-2px;
}
.testbutton {
    float:left;
    margin-left: 10px;
    height: 22px;
    line-height: 22px;
    text-align:center;
    background-color:#fbfbfb;
    border:1px solid #b7b7b7;
    color:#606060;
    cursor:pointer;
    display:inline-block;
    font:bold 12px/100% Arial, sans-serif;
}

HTML :

<div class="test1">
<label for="test" title="test">test</label>                                
<input style="width:18px; float:left;" type="checkbox" name="test" id="test" tabindex="5" />
<input class="testbutton" id="testbutton" style="width:60px;"type="button" value="Import" /></div>

Answer 1

Essayez d'ajouter la propriété line-height: 22px; au code.

Answer 2

Vous pouvez utiliser flexbox (vérifier Support du navigateur en fonction de vos besoins).

.testbutton {
  display: inline-flex;
  align-items: center; 
}

Answer 3

Utilisez le <button> à la place. <button> Les étiquettes sont centrées verticalement par défaut.

Answer 4

J'ai découvert que l'utilisation d'une largeur fixe avec un rembourrage semble fonctionner (dans ff au moins).

.Btn
 {
   width:75px;
   padding:10px;
 }

Essayez-le à l'adresse suivante:-

http://jsfiddle.net/stevenally/z32kg/

Answer 5

J'ai renoncé à essayer d'aligner mon texte sur les boutons ! Maintenant, si j'en ai besoin, je me sers de <a> comme ceci :

<a href="javascript:void();" style="display:block;font-size:1em;padding:5px;cursor:default;" onclick="document.getElementById('form').submit();">Submit</a>

Ainsi, si la taille de la police du document est de 12px, mon "bouton" aura une hauteur de 22px. Et le texte sera aligné verticalement. Cela en théorie, car, dans certains cas, un padding inégal de "6px 5px 4px 5px" fera l'affaire.

Bien qu'il s'agisse d'un hack, cette technique est très efficace pour résoudre les problèmes de compatibilité avec les anciens navigateurs, comme IE6 !