Vertically aligning text next to a radio button

This is a basic CSS question, I have a radio button with a small text label after it. I want the text to appear centered vertically but the text is always aligned with the button of the radio button in my case.

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

Here is a Jsfiddle:

http://jsfiddle.net/UnA6j/

Any suggestions?

Thanks,

Alan.

Solution 1:

Use it inside a label. Use vertical-align to set it to various values -- bottom, baseline, middle etc.

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

Solution 2:

I think this is what you might be asking for

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>

Solution 3:

Used to this

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

Demo

Solution 4:

This will give dead on alignment

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