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 button of the radio button in my case    lt p gt  lt input type  radio  id  opt1  name  opt1  value  1    gt A label lt  p gt    Here is a Jsfiddle   http   jsfiddle net UnA6j   Any suggestions   Thanks   Alan

User · Answer

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>

User · Answer

You need to align the text to the left of radio button using float left  input type  radio    float left      You may use label too for more responsive output

User · Answer

Used to this       input type  radio        vertical-align top        p      font-size 10px line-height  18px      Demo

User · Answer

This will give dead on alignment  input type  radio       margin-top  1px    vertical-align  top

User · Answer

You could also try something like this    x000D   x000D  input type  radio     x000D    margin-top  -1px  x000D    vertical-align  middle  x000D    x000D     lt label  class  child  gt  lt input id    warm  type  radio  name  weathertype  value  warm  checked gt  Warm lt br gt  lt  label gt  x000D   lt label class  child1  gt  lt input id    cold  type  radio  name  weathertype  value  cold  checked gt  Cold lt br gt  lt  label gt  x000D   x000D   x000D

User · Answer

simple and short solution add below style   style  vertical-align  text-bottom

User · Answer

You may try something like    lt p gt  lt input type  radio  id  oddsPref  name  oddsPref  value  decimal    gt  lt span gt Decimal lt  span gt  lt  p gt    and give the span a margin top like   span      margin-top  4px      position absolute      here is the fiddle http   jsfiddle net UnA6j 11

User · Answer

HTML    lt label gt  lt input type  radio  id  opt1  name  opt1  value  1  gt  A label lt  label gt    CSS   label input type  radio     vertical-align  text-bottom

User · Answer

x000D   x000D  input radio  vertical-align middle  margin-top 8px  margin-bottom 12px   x000D   x000D   x000D    SIMPLY Adjust top and bottom as needed for PERFECT ALIGNMENT of radio button or checkbox   x000D   x000D   lt input type  radio  class  radio  gt  x000D   x000D   x000D

User · Answer

Use it inside a label  Use vertical-align to set it to various values -- bottom  baseline  middle etc   http   jsfiddle net UnA6j 5

[css] Vertically aligning text next to a radio button

Examples related to css

Examples related to alignment

Examples related to radio