Alineación vertical del texto junto a un botón de opción

Esta es una pregunta básica de CSS, tengo un botón de opción con una pequeña etiqueta de texto después de ella. Quiero que el texto aparezca centrado verticalmente, pero el texto siempre está alineado con el botón del botón de opción en mi caso.

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

Aquí hay un Jsfiddle:

Http://jsfiddle.net/UnA6j /

Alguna sugerencia?

Gracias,

[1] Alan.
Author: Alan A, 2013-07-25
Source

10 answers

Utilícelo dentro de un label. Use vertical-align para establecer varios valores -- bottom, baseline, middle etc.

Http://jsfiddle.net/UnA6j/5 /

 32
Author: Prasanth,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-07 11:50:09

Creo que esto es lo que podrías estar pidiendo

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>
 15
Author: Rahul Thakur,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-10 22:11:41

Se utiliza para esto 

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

Demo

 7
Author: Rohit Azad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-25 11:55:14

HTML: 

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

CSS: 

label input[type="radio"] { vertical-align: text-bottom; }
 4
Author: Edward Brey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-28 21:12:35

Puedes intentar algo como; 

<p><input type="radio" id="oddsPref" name="oddsPref" value="decimal" /><span>Decimal</span></p>

Y dar al span un margen superior como; 

span{
    margin-top: 4px;
    position:absolute;
}

Aquí está el violín http://jsfiddle.net/UnA6j/11/

 3
Author: blasteralfred Ψ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-25 12:03:38

Necesita alinear el texto a la izquierda del botón de opción usando float: left

input[type="radio"]{
float:left;
}

También puede usar label para una salida más sensible.

 3
Author: Sunil Kumar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-25 12:31:38

Esto dará muerto en la alineación

input[type="radio"] {
  margin-top: 1px;
  vertical-align: top;
}
 3
Author: Nils,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-02 19:34:57

Solución simple y corta agregue el siguiente estilo: 

style="vertical-align: text-bottom;"
 2
Author: Vasant,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-16 10:02:50

También puedes probar algo como esto:

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
Author: Olivia Steger,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-19 14:20:12 

input.radio {vertical-align:middle; margin-top:8px; margin-bottom:12px;}

SIMPLEMENTE Ajuste la parte superior e inferior según sea necesario para UNA ALINEACIÓN PERFECTA del botón de opción o la casilla de verificación

<input type="radio" class="radio">
 0
Author: Kickenback61,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-14 16:56:10