web-dev-qa-db-fra.com

Alignement vertical du texte à côté d'un bouton radio

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:

http://jsfiddle.net/UnA6j/

Aucune suggestion?

Merci,

Alan.

cssalignmentradio
37
Alan A

Utilisez-le dans une label. Utilisez vertical-align pour le définir sur différentes valeurs - bottom, baseline, middle etc.

http://jsfiddle.net/UnA6j/5/

34
Prasanth

Je pense que c'est ce que vous demandez peut-être

http://jsbin.com/ixowuw/2/

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>
16
Rahul Thakur

Utilisé pour cela 

    input[type="radio"]{
    vertical-align:top;
    }
p{
    font-size:10px;line-height: 18px;
}

Démo

8
Rohit Azad

HTML:

<label><input type="radio" id="opt1" name="opt1" value="1"> A label</label>

CSS:

label input[type="radio"] { vertical-align: text-bottom; }
5
Edward Brey

Cela donnera mort sur l'alignement

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

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.

3
Sunil Kumar

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/

3
blasteralfred Ψ

solution simple et courte ajouter ci-dessous le style:

style="vertical-align: text-bottom;"
2
Vasant

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

0
Kickenback61

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>

0
Olivia Steger