Ceci est une question CSS de base, j'ai un bouton radio avec une petite étiquette de texte après. Je veux que le texte apparaisse centré verticalement mais le texte est toujours aligné avec le bouton du bouton radio dans mon cas.
<p><input type="radio" id="opt1" name="opt1" value="1" />A label</p>
Voici un Jsfiddle:
Aucune suggestion?
Merci,
Alan.
Utilisez-le dans une label
. Utilisez vertical-align
pour le définir sur différentes valeurs - bottom
, baseline
, middle
etc.
Je pense que c'est ce que vous demandez peut-être
CSS
label{
font-size:18px;
vertical-align: middle;
}
input[type="radio"]{
vertical-align: middle;
}
HTML
<span>
<input type="radio" id="oddsPref" name="oddsPref" value="decimal" />
<label>Decimal</label>
</span>
Utilisé pour cela
input[type="radio"]{
vertical-align:top;
}
p{
font-size:10px;line-height: 18px;
}
HTML:
<label><input type="radio" id="opt1" name="opt1" value="1"> A label</label>
CSS:
label input[type="radio"] { vertical-align: text-bottom; }
Cela donnera mort sur l'alignement
input[type="radio"] {
margin-top: 1px;
vertical-align: top;
}
Vous devez aligner le texte à gauche du bouton radio à l’aide de float: left
input[type="radio"]{
float:left;
}
Vous pouvez également utiliser label pour une sortie plus réactive.
Vous pouvez essayer quelque chose comme:
<p><input type="radio" id="oddsPref" name="oddsPref" value="decimal" /><span>Decimal</span></p>
et donnez à l'envergure une marge supérieure comme;
span{
margin-top: 4px;
position:absolute;
}
voici le violon http://jsfiddle.net/UnA6j/11/
solution simple et courte ajouter ci-dessous le style:
style="vertical-align: text-bottom;"
input.radio {vertical-align:middle; margin-top:8px; margin-bottom:12px;}
SIMPLY Ajustez le haut et le bas selon les besoins pour un alignement parfait des boutons radio
<input type="radio" class="radio">
Vous pouvez aussi essayer quelque chose comme ça:
input[type="radio"] {
margin-top: -1px;
vertical-align: middle;
}
<label class="child"><input id = "warm" type="radio" name="weathertype" value="warm" checked> Warm<br></label>
<label class="child1"><input id = "cold" type="radio" name="weathertype" value="cold" checked> Cold<br></label>