Comment aligner verticalement un bouton radio html sur son étiquette?

J'ai un formulaire avec des boutons radio qui sont sur la même ligne que leurs étiquettes. Les boutons radio ne sont cependant pas alignés verticalement avec leurs étiquettes comme indiqué dans la capture d'écran ci-dessous.

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

Éditer:

Voici le code html:

<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/>
<label for="rd1">radio 1</label><br/>
<input type="radio" name="user_level" id="rd2" value="2"/>
<label for="rd2">radio 2</label><br/>
<input type="radio" name="user_level" id="rd3" value="3"/>
<label for="rd3">radio 3</label><br/>

Et le code css:

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

Essaye ça:

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

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

Mettez de la classe pour toutes les radios. Cela fonctionnera pour tous les boutons radio de la page html.

Violon

Je sais que j'avais choisi la réponse de menuka devinda, mais en regardant les commentaires ci-dessous, je suis d'accord 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 offert 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.

essayez d'ajouter vertical-align:topdans 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/

Pourrait aussi ajouter un peu de flexibilité aux réponses.

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

.Radio--large {
  font-size: 2rem;
}

.Radio-Input {
  margin: 0 0.5rem 0;
}

<div>
  <label class="Radio" for="sex-female">
    <input class="Radio-Input" type="radio" id="sex-female" name="sex" value="female" />
    Female
  </label>

  <label class="Radio" for="sex-male">
    <input class="Radio-Input" type="radio" id="sex-male" name="sex" value="male" />
    Male
  </label>
</div>


<div>
  <label class="Radio Radio--large" for="sex-female2">
    <input class="Radio-Input" type="radio" id="sex-female2" name="sex" value="female" />
    Female
  </label>

  <label class="Radio Radio--large" for="sex-male2">
    <input class="Radio-Input" type="radio" id="sex-male2" name="sex" value="male" />
    Male
  </label>
</div>

Vous pouvez faire comme ceci:

input {
    vertical-align:middle;
}

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

DEMO

Quelque chose comme ça devrait fonctionner

CSS:

input {
    float: left;
    clear: left;
    width: 50px;
    line-height: 20px;
}

label {
    float: left;
    vertical-align: middle;
}

label, input {
    vertical-align: middle;
}

Je suis juste aligner le milieu vertical des boîtes avec la ligne de base de la boîte parent plus la moitié de la hauteur x (en.wikipedia.org/wiki/X-height) du parent.

Beaucoup de ces réponses disent à utiliser vertical-align: middle;, ce qui rapproche l'alignement mais pour moi, il est toujours décalé de quelques pixels. La méthode que j'ai utilisée pour obtenir un véritable alignement 1 à 1 entre les étiquettes et les entrées radio est la suivante, avec vertical-align: top;:

label, label>input{
    font-size: 20px;
    display: inline-block;
    margin: 0;
    line-height: 28px;
    height: 28px;
    vertical-align: top;
}

<h1>How are you?</h1>
<fieldset>
	<legend>Your response:</legend>
	<label for="radChoiceGood">
		<input type="radio" id="radChoiceGood" name="radChoices" value="Good">Good
	</label>
	
	<label for="radChoiceExcellent">
		<input type="radio" id="radChoiceExcellent" name="radChoices" value="Excellent">Excellent
	</label>
	
	<label for="radChoiceOk">
		<input type="radio" id="radChoiceOk" name="radChoices" value="OK">OK
	</label>
</fieldset>

J'aime mettre les entrées à l'intérieur des étiquettes (bonus supplémentaire: maintenant vous n'avez plus besoin de l' forattribut sur l'étiquette), et mettre vertical-align: middlesur l'entrée.

label > input[type=radio] {
    vertical-align: middle;
    margin-top: -2px;
}

#d2 {  
    font-size: 30px;
}

<div>
	<label><input type="radio" name="radio" value="1">Good</label>
	<label><input type="radio" name="radio" value="2">Excellent</label>
<div>
<br>
<div id="d2">
	<label><input type="radio" name="radio2" value="1">Good</label>
	<label><input type="radio" name="radio2" value="2">Excellent</label>
<div>

(C'est -2px margin-topune question de goût.)

Une autre option que j'aime beaucoup est d'utiliser une table. (Tenez vos fourches! C'est vraiment sympa!) Cela signifie que vous devez ajouter l' forattribut à toutes vos étiquettes et idà vos entrées. J'avais recommandé cette option pour les étiquettes avec un long contenu textuel, sur plusieurs lignes.

<table><tr><td>
    <input id="radioOption" name="radioOption" type="radio" />
    </td><td>
    <label for="radioOption">                     
        Really good option
    </label>
</td></tr></table>

Bien que je sois d'accord, les tableaux ne doivent pas être utilisés pour les mises en page de conception contrairement à la croyance populaire, ils passent la validation. autrement dit, la balise table n'est pas obsolète. La meilleure façon d'aligner les boutons radio est d'utiliser le CSS central d'alignement vertical avec des marges ajustées sur les éléments d'entrée.

Ajouter display:inline-blockdes étiquettes et leur donner padding-topréglerait ce problème, je pense. En outre, il suffit de définir line-heightles étiquettes sur les étiquettes.

il y a plusieurs façons, je préférerais utiliser une table en html. vous pouvez ajouter deux colonnes trois rangées de table et placer les boutons radio et l'étiquette.

<table border="0">

<tr>
  <td><input type="radio" name="sex" value="1"></td>
  <td>radio1</td>

</tr>
<tr>
  <td><input type="radio" name="sex" value="2"></td>
  <td>radio2</td>

</tr>
</table>