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.

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

Kalikow

jsfiddle.net/UnA6j/5 – Anson

You should use a <label> for a label instead of a paragraph. – Faline

Answer 1

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>

Anson

thanks... I still can't get it to align see my updated code with label.. jsfiddle.net/UnA6j/5 – Kalikow

Ok I got it working, I fiddled with your code and adjusted the radio ipnut to have a negative top margin which shifts it up so that the alignment is precise. Is negative margins accepted practise, it feels wrong! jsfiddle.net/UnA6j/5 – Kalikow

Nice.. I don't think negative margins are an issue.. if it is working across all browsers, it's good to go.. is the norm – Anson

You can also use numeric values for vertical-align rule. For example vertical-align:-1px; – Whomever

Thanks, I got mine aligned with vertical-align: sub; – Seay

Answer 2

I think this is what you might be asking for

http://jsbin.com/ixowuw/2/

label {
  font-size: 18px;
  vertical-align: middle;
}

input[type="radio"] {
  vertical-align: middle;
}

<span>
  <input type="radio" id="oddsPref" name="oddsPref" value="decimal" />
  <label>Decimal</label>
</span>

Macaco

@Rahul-Thakus thanks for your code gives me the same problem.. text is aligned with the baseline.... – Kalikow

make sure that it is not being overridden by some other parent property, btw what browser you are using? – Macaco

@Protectorone have made a small change in the html and css. Please try this, should work for larger fonts too. – Macaco

Also make sure your radio button doesn't have any margins on it. That screwed me up. – Keciakeck

Answer 3

Used to this

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

Demo

Rois

Answer 4

This will give dead on alignment

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

Hydrus

Answer 5

simple and short solution add below style:

style="vertical-align: text-bottom;"

Agrestic

Answer 6

HTML:

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

CSS:

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

Quarrel

Answer 7

You may try something like;

<p><input type="radio" id="oddsPref" name="oddsPref" value="decimal" /><span>Decimal</span></p>

and give the span a margin top like;

span{
    margin-top: 4px;
    position:absolute;
}

here is the fiddle http://jsfiddle.net/UnA6j/11/

Adest

I needed cross-browser placement using a relative rather than an absolute font size, which yields different sizes of text in different browsers. Your post gave me the idea of using negative margin-top values in ems to compensate, which worked! – Freckly

Answer 8

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.

Sly

Answer 9

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>

Touzle

Answer 10

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

Broaddus