Search code examples
cssradio-buttonalignment

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

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

    input[type="radio"] {
  vertical-align: baseline;
}
    <label>
  <input type="radio" id="oddsPref" name="oddsPref" value="decimal" /> Decimal
</label>

<label>
  <input type="radio" id="oddsPref" name="oddsPref" value="decimal" /> <img src="https://via.placeholder.com/80x30">
</label>