Comment aligner verticalement un bouton radio html avec son libellé?

Question

J'ai un formulaire avec des boutons radio qui sont sur la même ligne que leurs étiquettes. Cependant, les boutons radio ne sont pas alignés verticalement avec leurs étiquettes comme le montre la capture d'écran ci-dessous.

Comment puis-je aligner verticalement les boutons radio avec leurs étiquettes?

Éditer :

Voici le code html :

radio 1

radio 2

radio 3

Et le code css :

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
}

Answer 1

Essayez ceci :

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}

Answer 2

input {
    display: table-cell;
    vertical-align: middle
}

Mettre une classe pour tous les boutons radio. Cela fonctionnera pour tous les boutons radio sur la page html.

Fiddle

Answer 3

Je sais que j'avais sélectionné la réponse de menuka devinda mais en regardant les commentaires ci-dessous, j'ai concouru et j'ai essayé de trouver une meilleure solution. J'ai réussi à trouver cela et à mon avis, c'est une solution beaucoup plus élégante :

input[type='radio'], label{   
    vertical-align: baseline;
    padding: 10px;
    margin: 10px;
 }

Merci à tous ceux qui ont proposé une réponse, votre réponse n'est pas passée inaperçue. Si vous avez encore d'autres idées, n'hésitez pas à ajouter votre propre réponse à cette question.

Answer 4

Essayez d'ajouter vertical-align: top dans le css

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
    vertical-align:top;
}​

Test: http://jsfiddle.net/muthkum/heAWP/

Answer 5

Vous pouvez faire comme ceci :

input {
    vertical-align:middle;
}

label{
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
}