50

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.

2
  • jsfiddle.net/UnA6j/5
    – Prasanth
    Commented Jul 25, 2013 at 11:55
  • 3
    You should use a <label> for a label instead of a paragraph.
    – Musa
    Commented Jul 25, 2013 at 11:57

10 Answers 10

43

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>

5
  • thanks... I still can't get it to align see my updated code with label.. jsfiddle.net/UnA6j/5
    – Alan A
    Commented Jul 25, 2013 at 12:39
  • 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
    – Alan A
    Commented Jul 25, 2013 at 13:01
  • 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
    – Prasanth
    Commented Jul 25, 2013 at 13:11
  • 10
    You can also use numeric values for vertical-align rule. For example vertical-align:-1px;
    – Slava
    Commented Apr 14, 2015 at 9:36
  • 2
    Thanks, I got mine aligned with vertical-align: sub;
    – nmeuleman
    Commented May 13, 2015 at 12:43
23

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>

4
  • @Rahul-Thakus thanks for your code gives me the same problem.. text is aligned with the baseline....
    – Alan A
    Commented Jul 25, 2013 at 12:32
  • make sure that it is not being overridden by some other parent property, btw what browser you are using? Commented Jul 25, 2013 at 12:44
  • @Protectorone have made a small change in the html and css. Please try this, should work for larger fonts too. Commented Apr 10, 2017 at 22:12
  • Also make sure your radio button doesn't have any margins on it. That screwed me up.
    – dallin
    Commented Oct 15, 2020 at 21:36
9

Used to this

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

Demo

7

This will give dead on alignment

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

simple and short solution add below style:

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

HTML:

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

CSS:

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

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/

1
  • 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!
    – grw
    Commented Jun 16, 2015 at 13:23
2

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.

1

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>

0
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.