Vertically aligning text next to a radio button

Question

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 b

Answer 1

This will give dead on alignment

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

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

Answer 3

HTML:

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

CSS:

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

Answer 4

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

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

Answer 5

You could also try something like this:

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 6

input.radio {vertical-align:middle; margin-top:8px; margin-bottom:12px;}

SIMPLY Adjust top and bottom as needed for PERFECT ALIGNMENT of radio button or checkbox

<input type="radio" class="radio">