Como alinhar verticalmente um botão de rádio html ao seu rótulo?

Eu tenho um formulário com botões de opção que estão na mesma linha de seus rótulos. Os botões de opção, entretanto, não estão alinhados verticalmente com seus rótulos, conforme mostrado na captura de tela abaixo.

Como posso alinhar verticalmente os botões de opção com seus rótulos?

Editar:

Aqui está o código 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/>

E o código css:

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
}

Experimente isto:

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

input {
    display: table-cell;
    vertical-align: middle
}

Coloque aula para todos os rádios. Isso funcionará para todos os botões de opção na página html.

Violino

Sei que selecionei a resposta de menuka devinda, mas olhando os comentários abaixo concordei e tentei encontrar uma solução melhor. Consegui pensar nisso e, na minha opinião, é uma solução muito mais elegante:

input[type='radio'], label{   
    vertical-align: baseline;
    padding: 10px;
    margin: 10px;
 }

Obrigado a todos que responderam, sua resposta não passou despercebida. Se você ainda tiver outras idéias, sinta-se à vontade para adicionar sua própria resposta a esta pergunta.

tente adicionar vertical-align:topao css

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
    vertical-align:top;
}​

Teste: http://jsfiddle.net/muthkum/heAWP/

Pode muito bem adicionar um pouco de flexibilidade às respostas.

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

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

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

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

Você pode fazer assim:

input {
    vertical-align:middle;
}

label{
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
}

DEMO

Algo assim deve funcionar

CSS:

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

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

label, input {
    vertical-align: middle;
}

Estou apenas alinhando o ponto médio vertical das caixas com a linha de base da caixa pai mais metade da altura x (en.wikipedia.org/wiki/X-height) do pai.

Muitas dessas respostas dizem para usar vertical-align: middle;, o que aproxima o alinhamento, mas para mim ainda está errado por alguns pixels. O método que usei para obter o verdadeiro alinhamento 1 para 1 entre os rótulos e as entradas de rádio é este, com vertical-align: top;:

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

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

Eu gosto de colocar as entradas dentro dos rótulos (bônus adicional: agora você não precisa do foratributo no rótulo) e colocar vertical-align: middlea entrada.

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

#d2 {  
    font-size: 30px;
}

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

(Isso -2px margin-topé uma questão de gosto.)

Outra opção que gosto muito é usar uma mesa. (Segure seus pitch forks! É muito bom!) Isso significa que você precisa adicionar o foratributo a todos os seus rótulos e ids às suas entradas. Eu recomendei essa opção para rótulos com conteúdo de texto longo, em várias linhas.

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

Embora eu concorde que as tabelas não devem ser usadas para layouts de design, ao contrário da crença popular, elas passam na validação. ou seja, a tag da tabela não está obsoleta. A melhor maneira de alinhar os botões de opção é usando o CSS do meio de alinhamento vertical com as margens ajustadas nos elementos de entrada.

Adicionar display:inline-blockrótulos e dar a eles padding-topresolveria isso, eu acho. Além disso, apenas definir line-heightnos rótulos também faria.

Existem várias maneiras, uma que eu preferiria é usar uma tabela em html. você pode adicionar uma tabela de duas colunas e três linhas e colocar os botões de opção e a etiqueta.

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