How to vertically align a html radio button to its label?

Question

I have a form with radio buttons that are on the same line as their labels. The radio buttons are however not aligned vertically with their labels as shown in the screenshot below.

The radio buttons.

How can I vertically align the radio buttons with their labels?

Edit:

Here's the html code:

<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/>
<label for="rd1">radio 1</label><br/>
<input type="radio" name="user_level" id="rd2" value="2"/>
<label for="rd2">radio 2</label><br/>
<input type="radio" name="user_level" id="rd3" value="3"/>
<label for="rd3">radio 3</label><br/>

And the css code:

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
}

What's your code look like at the moment? – George Nov 22 '12 at 09:52 — George, Nov 22 '12 at 09:52
@ninjacoder Update your question with the code. – Muthu Kumaran Nov 22 '12 at 09:54 — Muthu Kumaran, Nov 22 '12 at 09:54

score 177 · Answer 1 · answered Feb 07 '13 at 22:22

177

Try this:

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

answered Feb 07 '13 at 22:22

zxqx

5,115
2
20
28

9

This worked for me however I had to add a `height= 100%;` since my parent element did not explicitly set the height. – DaKaZ Dec 05 '14 at 17:11
1

This seemed to give me the most consistent approach between Mac, Windows, and Linux, using Chrome, Firefox, or IE. Also, I noticed that if I give padding on my label and put the radio inside the label, then I may need to set margin-top to a value less than -1px (like -3px) based on how much padding I was using on that label. (I like to give my radio box labels a hover color and rounded border effect to make them look cooler.) – Volomike May 09 '16 at 00:26
3

To explain why this is the only correct answer: Some elements in HTML have default margin or padding values, like the
or
elements or radio buttons. You can see this if you go into developer mode (F12) and hover your mouse over the tag. Actually, this is a good behaviour, because the browser himself use CSS to position predefined elements which the user then can reset. But it can be confusing if you don't know why something is misaligned in the first place. So always try to overwrite settings which you didn't set, if it looks weird by default.

StanE

Oct 09 '16 at 19:52

This doesn't seem to work when you increase or decrease font size. Please prove me wrong with a working example, though! – Protector one Jun 19 '17 at 12:34

score 17 · Answer 2 · edited Mar 01 '16 at 15:37

17

input {
    display: table-cell;
    vertical-align: middle
}

Put class for all radio. This will work for all radio button on the html page.

Fiddle

edited Mar 01 '16 at 15:37

Thomas Bormans

5,156
6
34
51

answered Nov 22 '12 at 10:05

vusan

5,221
4
46
81

This is by far the best solution I've seen for this. Radio Button Label Alignment has plagued me for years until this. Works every time for me. – G-Man Aug 10 '18 at 16:22
Note that this breaks when the label has multiple lines of text. – Daan Aug 11 '20 at 14:55
Your Fiddle example also applies `padding: 0; margin: 0` to the input elements, and it seems to be required to get the right alignment. – Emmanuel Bourg Sep 01 '20 at 23:51

score 16 · Answer 3 · answered Nov 22 '12 at 13:52

I know I'd selected the anwer by menuka devinda but looking at the comments below it I concurred and tried to come up with a better solution. I managed to come up with this and in my opinion it's a much more elegant solution:

input[type='radio'], label{   
    vertical-align: baseline;
    padding: 10px;
    margin: 10px;
 }

Thanks to everyone who offered an answer, your answer didn't go unnoticed. If you still got any other ideas feel free to add your own answer to this question.

Dominic · Answer 4 · 2022-11-15T02:20:01.943

Might as well add a bit of flex to the answers.

.Radio {
  display: inline-flex;
  align-items: center;
}

.Radio--large {
  font-size: 2em;
}

.Radio-Input {
  margin: 0 0.5em 0;
}

<div>
  <label class="Radio" for="sex-female">
    <input class="Radio-Input" type="radio" id="sex-female" name="sex" value="female" />
    Female
  </label>

  <label class="Radio" for="sex-male">
    <input class="Radio-Input" type="radio" id="sex-male" name="sex" value="male" />
    Male
  </label>
</div>


<div>
  <label class="Radio Radio--large" for="sex-female2">
    <input class="Radio-Input" type="radio" id="sex-female2" name="sex" value="female" />
    Female
  </label>

  <label class="Radio Radio--large" for="sex-male2">
    <input class="Radio-Input" type="radio" id="sex-male2" name="sex" value="male" />
    Male
  </label>
</div>

this worked! and it feels a lot less hacky than the other solutions. thank you! — Derek Kraan, Oct 18 '22 at 07:25

score 9 · Answer 5 · answered Nov 22 '12 at 10:02

9

try adding vertical-align:top into the css

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
    vertical-align:top;
}

Test: http://jsfiddle.net/muthkum/heAWP/

answered Nov 22 '12 at 10:02

Muthu Kumaran

17,682
5
47
70

1

This does not hold up when you increase or decrease font-size. – Protector one Jun 19 '17 at 12:35
1

@Protectorone That's an old answer and specific to OP question. If you are trying to do same with `font-size` then try using `display:flex`. Here's a demo, http://jsfiddle.net/et8z47q5/ – Muthu Kumaran Jun 19 '17 at 16:45

score 8 · Answer 6 · edited Oct 15 '20 at 21:24

8

You can do like this :

input {
    vertical-align:middle;
}

label{
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
}

edited Oct 15 '20 at 21:24

dallin

8,775
2
36
41

answered Nov 22 '12 at 10:06

Shailender Arora

7,674
2
31
35

Very good. I wanted to align the button instead of the label, and this does the trick. – posfan12 Apr 10 '19 at 23:56

Protector one · Answer 7 · 2017-07-10T13:27:20.470

I like putting the inputs inside the labels (added bonus: now you don't need the for attribute on the label), and put vertical-align: middle on the input.

label > input[type=radio] {
    vertical-align: middle;
    margin-top: -2px;
}

#d2 {  
    font-size: 30px;
}

<div>
 <label><input type="radio" name="radio" value="1">Good</label>
 <label><input type="radio" name="radio" value="2">Excellent</label>
<div>
<br>
<div id="d2">
 <label><input type="radio" name="radio2" value="1">Good</label>
 <label><input type="radio" name="radio2" value="2">Excellent</label>
<div>

(The -2px margin-top is a matter of taste.)

Another option I really like is using a table. (Hold your pitch forks! It's really nice!) It does mean you need to add the for attribute to all your labels and ids to your inputs. I'd recommended this option for labels with long text content, over multiple lines.

<table><tr><td>
    <input id="radioOption" name="radioOption" type="radio" />
    </td><td>
    <label for="radioOption">                     
        Really good option
    </label>
</td></tr></table>

score 1 · Answer 8 · answered Nov 22 '12 at 09:58

1

Something like this should work

CSS:

input {
    float: left;
    clear: left;
    width: 50px;
    line-height: 20px;
}

label {
    float: left;
    vertical-align: middle;
}

answered Nov 22 '12 at 09:58

Damien Overeem

4,487
4
36
55

Pavel Blagodov · Answer 9 · 2015-04-27T06:57:38.857

1

label, input {
    vertical-align: middle;
}

I'm just align the vertical midpoint of the boxes with the baseline of the parent box plus half the x-height (en.wikipedia.org/wiki/X-height) of the parent.

edited Apr 27 '15 at 06:57

answered Jun 03 '14 at 13:27

Pavel Blagodov

572
5
6

score 1 · Answer 10 · answered Jul 19 '15 at 23:43

A lot of these answers say to use vertical-align: middle;, which gets the alignment close but for me it is still off by a few pixels. The method that I used to get true 1 to 1 alignment between the labels and radio inputs is this, with vertical-align: top;:

label, label>input{
    font-size: 20px;
    display: inline-block;
    margin: 0;
    line-height: 28px;
    height: 28px;
    vertical-align: top;
}

<h1>How are you?</h1>
<fieldset>
 <legend>Your response:</legend>
 <label for="radChoiceGood">
  <input type="radio" id="radChoiceGood" name="radChoices" value="Good">Good
 </label>
 
 <label for="radChoiceExcellent">
  <input type="radio" id="radChoiceExcellent" name="radChoices" value="Excellent">Excellent
 </label>
 
 <label for="radChoiceOk">
  <input type="radio" id="radChoiceOk" name="radChoices" value="OK">OK
 </label>
</fieldset>

score 1 · Answer 11 · answered Nov 08 '15 at 11:42

While I agree tables shouldn't be used for design layouts contrary to popular belief they do pass validation. i.e. the table tag is not deprecated. The best way to align radio buttons is using the vertical align middle CSS with margins adjusted on the input elements.

score 0 · Answer 12 · answered Sep 08 '22 at 15:22

0

Try the below styling for the radio buttons

input { 
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

answered Sep 08 '22 at 15:22

KileMax

213
2
10

score 0 · Answer 13 · answered May 06 '23 at 14:33

0

Simply remove the margin: 10px;

in your CSS code, and it will fix everything

answered May 06 '23 at 14:33

Kuwaiti-girl

1

score -1 · Answer 14 · answered Nov 22 '12 at 09:53

-1

Adding display:inline-block to the labels and giving them padding-top would fix this, I think. Also, just setting the line-height on the labels would also.

answered Nov 22 '12 at 09:53

Anriëtte Myburgh

13,347
11
51
72

score -2 · Answer 15 · answered Nov 22 '12 at 10:00

-2

there are several way, one i would prefer is using a table in html. you can add two coloum three rows table and place the radio buttons and lable.

<table border="0">

<tr>
  <td><input type="radio" name="sex" value="1"></td>
  <td>radio1</td>

</tr>
<tr>
  <td><input type="radio" name="sex" value="2"></td>
  <td>radio2</td>

</tr>
</table>

answered Nov 22 '12 at 10:00

newday

3,842
10
54
79

6

Please don't use tables for layout purposes. – PeeHaa Nov 22 '12 at 13:24
4

-1 tables should not not be used for the layout and this code will not pass validation ... @ninjacoder , why the hell you picked this as the "answer"? – tereško Nov 22 '12 at 13:25
7

Indeed.. seriously.. every single time someone teaches to use tables for form markup, a cute kitten dies somewhere in the world.. – Damien Overeem Nov 22 '12 at 13:26
2

@PeeHaa , tereško ,Damien Overeem I think you guys are probably right, I've been able to come up with my own solution which I've posted below here. Thanks guys! Your help and advice is highly appreciated. – ninjacoder Nov 22 '12 at 13:56
in the question, it doesn't mention "layout".therefore, I think this is still valid. – newday Nov 16 '13 at 18:40
As mentioned before, a table is a non-optimal solution in this case. Have a look at alignment options, there are several valid attempts in other replies. – All Bits Equal Oct 06 '14 at 11:51
4

I've tried the other options and they weren't much good. Tables work. `.tablecell{dispay:table-cell;} ...
` seems more like a wonky workaround for people who don't want to admit they're using tables...
– Nov 30 '14 at 00:37
@DamienOvereem got any better alternatives??? – Wassim Katbey Jul 01 '22 at 19:39

How to vertically align a html radio button to its label?

15 Answers15

Linked