Vertically aligning text next to a radio button

Alan A picture Alan A · Jul 25, 2013 · Viewed 101.5k times · Source

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.

Answer

Prasanth picture Prasanth · Jul 25, 2013

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

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