web-dev-qa-db-fra.com

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 toutefois pas alignés verticalement avec leurs étiquettes, comme illustré dans la capture d'écran ci-dessous. 

The radio buttons.

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

Modifier:  

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;
}
htmlcssformsxhtmlradio-button
73
ninjacoder

Essaye ça:

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

Je sais que j'avais sélectionné 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.

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

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

Fiddle

10
vusan

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/

9
Muthu Kumaran

Vous pouvez faire comme ça:

input {
    vertical-align:middle;
}

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

D&EACUTE;MO

6
Shailender Arora

Autant ajouter un peu de souplesse aux réponses.

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

.Radio input {
  margin-right: 5px;
}

.Radio--Large {
  font-size: 2rem;
}
<div>
  <label class="Radio" for="sex-female">
    <input type="radio" id="sex-female" name="sex" value="female" />
    Female
  </label>

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


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

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

4
Dominic
label, input {
    vertical-align: middle;
}

Je viens d'aligner le point médian vertical des cases sur la ligne de base de la case parente plus la moitié de la hauteur x (en.wikipedia.org/wiki/X-height) du parent. 

1
Pavel Blagodov

Quelque chose comme ça devrait marcher

CSS:

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

label {
    float: left;
    vertical-align: middle;
}
1
Damien Overeem

Beaucoup de ces réponses disent d'utiliser vertical-align: middle;, qui aligne de près l'alignement, mais pour moi, il est toujours décalé de quelques pixels. La méthode que j’utilisais pour obtenir un alignement vrai 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>

1
JHS

Ajouter display:inline-block aux étiquettes et leur donner padding-top pourrait résoudre ce problème, je pense. En outre, définir le line-height sur les étiquettes le serait également.

0
Anriëtte Myburgh

J'aime mettre les entrées à l'intérieur des étiquettes (bonus supplémentaire: vous n'avez plus besoin de l'attribut for sur l'étiquette) et mettez vertical-align: middle sur 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>

(Le -2px margin-top est une question de goût.)

Une autre option que j'aime beaucoup consiste à utiliser une table. (Tenez votre diapason! C'est vraiment agréable!) Cela signifie que vous devez ajouter l'attribut for à toutes vos étiquettes et ids à vos entrées. J'avais recommandé cette option pour les étiquettes avec un texte long, 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>

0
Protector one

Bien que je convienne que les tableaux ne doivent pas être utilisés pour des mises en page de concept contraires à la croyance populaire, ils passent la validation. c'est-à-dire que la balise de table n'est pas obsolète. Le meilleur moyen d'aligner les boutons radio consiste à utiliser le CSS centré sur l'alignement vertical avec des marges ajustées sur les éléments d'entrée.

0
PixelBlender