Comment aligner verticalement un bouton radio html pour du label?

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

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

Edit:

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;
}

Quel est votre code ressemble à l'heure actuelle?
montrez votre code css
Mise à jour de votre question avec le code.
Juste mis à jour à la question.

InformationsquelleAutor ninjacoder | 2012-11-22

126

Essayez ceci:
```
input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}
```
- Cela a fonctionné pour moi, mais j'ai dû ajouter un height= 100%; depuis mon élément parent n'a pas explicitement de régler la hauteur.
- Cela semblait me donner le plus de cohérence entre les Mac, Windows et Linux, à l'aide de Chrome, Firefox ou IE. Aussi, j'ai remarqué que si je donne rembourrage sur mon label et de mettre la radio à l'intérieur de l'étiquette, puis j'ai peut être nécessaire de régler la marge supérieure à une valeur inférieure à -1px (comme-3px) basé sur la façon dont beaucoup de rembourrage, j'ai été en utilisant sur l'étiquette. (Je tiens à donner mon radio d'étiquettes de boîtes, un hover couleur et la forme arrondie de l'effet frontière pour leur donner un aspect plus frais.)
- Pour expliquer pourquoi c'est la seule bonne réponse: Certains éléments HTML ont de marge par défaut ou les valeurs de remplissage, comme l' <p> ou <li> éléments ou des boutons radio. Vous pouvez voir si vous allez dans le mode développeur (F12) et passez votre souris sur la balise. En fait, c'est un bon comportement, parce que le navigateur lui-même utiliser les CSS pour positionner des éléments dont l'utilisateur peut réinitialiser. Mais il peut être source de confusion si vous ne savez pas pourquoi quelque chose est mal aligné en premier lieu. Il faut donc toujours essayer de remplacer les paramètres qui n'est pas défini, si cela semble bizarre par défaut.
- Cela ne semble pas fonctionner lorsque vous augmentez ou réduisez la taille de la police. Merci de me prouver le contraire avec un exemple de travail, même si!
InformationsquelleAutor zakangelle
13

Je sais que j'avais sélectionné la réponse par menuka devinda mais en regardant les commentaires ci-dessous, il je l'ai dit d'accord et essayé de trouver une meilleure solution. J'ai réussi à venir jusqu'à présent et c'est à mon avis beaucoup plus solution é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.

InformationsquelleAutor ninjacoder
10
```
input {
    display: table-cell;
    vertical-align: middle
}
```
Mettre de classe pour tous les la radio. Cela fonctionne pour tous les bouton radio sur la page html.

Violon
- C'est de loin la meilleure solution que j'ai vu pour cette. Radio-Étiquette sur le Bouton d'Alignement m'a tourmenté pendant des années jusqu'à présent. Fonctionne à chaque fois pour moi.
InformationsquelleAutor vusan
9

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/
- Ce n'est pas valable lorsque vous augmentez ou réduisez la taille de police.
- C'est une vieille réponse et spécifique à l'OP question. Si vous essayez de faire de même avec font-size puis essayez d'utiliser des display:flex. Voici une démo, jsfiddle.net/et8z47q5
InformationsquelleAutor Muthu Kumaran
7

Vous pouvez le faire comme ceci :
```
input {
    vertical-align:middle;
}

label{
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
}
```
~~DÉMO~~
- lien vers la démo de dead
- Très bon. J'ai voulu aligner le bouton à la place de l'étiquette, et cela fait l'affaire.
InformationsquelleAutor Shailender Arora

Pourrait tout aussi bien ajouter un peu de flex pour les réponses.

CSS:

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

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

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

HTML:

<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>

InformationsquelleAutor Dominic

Quelque chose comme cela devrait fonctionner

CSS:

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

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

InformationsquelleAutor Damien Overeem

1
```
label, input {
    vertical-align: middle;
}
```
Je suis juste aligner la verticale du milieu de la boîte avec la ligne de base du parent de la boîte de plus de la moitié de la hauteur d'x (en.wikipedia.org/wiki/X-height) de la maison mère.

InformationsquelleAutor Pavel Blagodov

Beaucoup de ces réponses dites d'utiliser vertical-align: middle;, qui obtient l'alignement de près, mais pour moi, c'est toujours une de quelques pixels. La méthode que j'ai utilisé pour obtenir vrai 1 à 1 de l'alignement entre les étiquettes et l'entrée radio est présente, avec vertical-align: top;:

CSS:

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

HTML:

<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>

InformationsquelleAutor JHS

0

Ajoutant display:inline-block des étiquettes et de leur donner padding-top permettrait de résoudre ce problème, je pense. Aussi, la seule définition de l' line-height sur les étiquettes aussi.

InformationsquelleAutor Anriëtte Myburgh
0

Alors que je suis d'accord tables ne doivent pas être utilisés pour les modèles de mises en page contrairement à la croyance populaire, ils passent à la validation. c'est à dire la balise table n'est pas déconseillée. La meilleure façon d'aligner les boutons radio est à l'aide de la verticale aligner milieu CSS avec des marges ajustées sur les éléments d'entrée.

InformationsquelleAutor PixelBlender

J'aime mettre les entrées à l'intérieur des étiquettes (bonus: maintenant, vous n'avez pas besoin de la for attribut sur l'étiquette), et de mettre vertical-align: middle sur l'entrée.

CSS:

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

#d2 {  
    font-size: 30px;
}

HTML:

<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 vraiment, c'est à l'aide d'un tableau. (Maintenez votre fourche! C'est vraiment sympa!) Cela signifie que vous devez ajouter le for attribuer à l'ensemble de vos étiquettes et ids à vos entrées. J'avais cette option est recommandée pour les étiquettes avec de longs textes sur plusieurs lignes.

HTML:

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

InformationsquelleAutor Protector one

-3

il y a plusieurs façon, celui que je préfère est à l'aide d'un tableau en html.
vous pouvez ajouter deux coloum trois lignes de la table et placez les boutons de la radio et de la lable.
```
<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>
```
- Merci. Fonctionne très bien. 🙂
- S'il vous plaît ne pas utiliser des tableaux pour la disposition.
- -1 tables ne devrait pas être utilisé pour la mise en page et ce code ne sera pas validée ... @ninjacoder , pourquoi diable vous avez choisi ce que la "réponse"?
- En effet.. sérieusement.. chaque fois que quelqu'un apprend à utiliser des tableaux pour la forme de balisage, un mignon chaton meurt quelque part dans le monde..
- tereško ,Damien Overeem, je pense que vous les gars sont probablement raison, j'ai été en mesure de venir avec ma propre solution que j'ai posté ci-dessous ici. Merci les gars! Votre aide et vos conseils sont très appréciées.
- dans la question, il ne parle pas de "mise en page".donc, je pense que c'est toujours valable.
- Comme mentionné précédemment, un tableau est une non-solution optimale dans ce cas. Avoir un regard sur les options d'alignement, il y a plusieurs valide tentatives dans d'autres réponses.
- J'ai essayé les autres options et qu'elles n'étaient pas très bonnes. Les Tables de travail. .tablecell{dispay:table-cell;} ... <div class="tablecell"> semble plus comme un vilain solution de contournement pour les personnes qui ne veulent pas admettre qu'ils sont à l'aide de tableaux...
InformationsquelleAutor newday

Vous devez vous connecter pour publier un commentaire.