imagen - centrar texto horizontalmente y vertical css

Alinear verticalmente texto al lado de un botón de radio

Question

Esta es una pregunta básica de CSS. Tengo un botón de opción con una pequeña etiqueta de texto. 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,

Alan.

Answer 1

Úselo dentro de una label . Use vertical-align para establecerlo en varios valores: bottom , baseline , middle , etc.

jsfiddle.net/UnA6j/5

Answer 2

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>

Answer 3

Debe alinear el texto a la izquierda del botón de radio con flotador: izquierda

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

Puede usar la etiqueta también para una salida más receptiva.

Answer 4

Esto dará muerte en la alineación

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

Answer 5

HTML:

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

CSS:

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

Answer 6

Puede intentar algo como;

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

y le da al tramo un margen superior como;

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

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

Answer 7

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>

Answer 8

Usado para esto

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

Demo

Answer 9

solución simple y corta agregar estilo a continuación:

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

Answer 10

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