Radio/checkbox alignment in HTML/CSS

Question

What is the cleanest way to align properly radio buttons / checkboxes with text? The only reliable solution which I have been using so far is table based:

<table>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 1</td>
</tr>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 2</td>
</tr>
</table>

This may be frown upon by some. I’ve just spent some time (again) investigating a tableless solution but failed. I’ve tried various combinations of floats, absolute/relative positioning and similar approaches. Not only that they mostly relied silently on an estimated height of the radio buttons / checkboxes, but they also behaved differently in different browsers. Ideally, I would like to find a solution which does not assume anything about sizes or special browser quirks. I’m fine with using tables, but I wonder where there is another solution.

I set up a JSFIddle to illustrate some of the suggestions: http://jsfiddle.net/casebash/XNJxT/906/ — Casebash, Feb 15 '13 at 04:48
"align properly what o you mean? What counts as properly aligned? — Raedwald, Sep 11 '14 at 10:47
you can align in percentage : for myself I use : vertical-align: -15%; on the input tag — PhilMaGeo, Jun 04 '19 at 08:17

score 121 · Accepted Answer · edited Jan 26 '15 at 13:03

121

I think I have finally solved the problem. One commonly recommended solution is to use vertical-align: middle:

<input type="radio" style="vertical-align: middle"> Label

The problem, however, is that this still produces visible misalignments even though it should theoretically work. The CSS2 specification says that:

vertical-align: middle: Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

So it should be in the perfect centre (the x-height is the height of the character x). However, the problem seems to be caused by the fact browsers commonly add some random uneven margins to radio buttons and checkboxes. One can check, for instance in Firefox using Firebug, that the default checkbox margin in Firefox is 3px 3px 0px 5px. I'm not sure where it comes from, but the other browsers seem to have similar margins as well. So to get a perfect alignment, one needs to get rid of these margins:

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label

It is still interesting to note that in the table based solution the margins are somehow eaten and everything aligns nicely.

edited Jan 26 '15 at 13:03

Dave

498
2
7
22

answered May 20 '09 at 21:55

Jan Zich

14,993
18
61
73

4

Really nice answer - well researched, and it works. The more I look at CSS the more localised margin and padding settings seem to be the key. Thanks! – penderi Jul 28 '09 at 10:36
as of 18.Apr.2010 this solution doesnt work in Firefox 3.6.3 for win – Chris Apr 18 '10 at 14:16
5

some nice css for this, so you don't have to style every button and box - input[type="radio"], input[type="checkbox"] {vertical-align: middle; margin: 0px; } – Loren_ Jan 25 '11 at 20:46
Would cssreset fix the different styles? – Shane Courtrille Jul 19 '11 at 17:40
4

FYI, the px after 0 is redundant. When the CSS value is 0, the unit doesn't matter, so `margin:0` would suffice. – jedmao Sep 21 '12 at 20:11
I've found that "margin:0; padding:0;" works even a little bit better. – abjennings Oct 18 '12 at 17:33
2

Remember to check the `vertical-align` of other elements in the same line (eg: ``) when using this solution. – Diogo Kollross May 03 '13 at 18:40

score 31 · Answer 2 · answered Dec 28 '08 at 18:35

31

The following works in Firefox and Opera (sorry, I do not have access to other browsers at the moment):

<div class="form-field">
    <input id="option1" type="radio" name="opt"/>
    <label for="option1">Option 1</label>
</div>

The CSS:

.form-field * {
    vertical-align: middle;
}

answered Dec 28 '08 at 18:35

i dont understand why your answer wasn't accepted, it's the simplest working one for all major browsers (as of 18.Apr.2010) – Chris Apr 18 '10 at 14:20
7

Please note that the DOCTYPE of your document should be STRICT to see the effects of VERTICAL-ALIGN. – Sep 11 '10 at 09:34
4

I think the reason this wasn't accepted as the answer is because, as the answer that was selected says, some browsers add asymmetric margin values, which stop this approach from working. – DaveyDaveDave Oct 12 '11 at 16:19

score 14 · Answer 3 · answered Oct 28 '10 at 15:02

14

I found the best and easiest way to do it is this one because you don't need to add labels, divs or whatsoever.

input { vertical-align: middle; margin-top: -1px;}

answered Oct 28 '10 at 15:02

Dario

157
1
2

It's the **margin-top:-1px;** that's the extra sauce that gets my vote. I have a radio inside a span I'm using as a button. putting only the vertical-align for the radio style puts the radio just crossing the bottom of the span. putting the vertical-align in the span style leaves the button at the top. Only the margin-top seems to have no effect. But put them together and _voila_ – gordon Aug 29 '12 at 21:54
-1. This is a bad idea, you are causing the radio element shift up which cause it to not line up with the other surrounding elements. Go try it with several radio input one after another with other elements on the sides. – codenamezero Apr 24 '14 at 15:27

Keith Donegan · Answer 4 · 2008-12-28T18:14:39.140

7

I wouldn't use tables for this at all. CSS can easily do this.

I would do something like this:

   <p class="clearfix">
      <input id="option1" type="radio" name="opt" />
      <label for="option1">Option 1</label>
   </p>

p { margin: 0px 0px 10px 0px; }
input { float: left; width: 50px; }
label { margin: 0px 0px 0px 10px; float: left; }

Note: I have used the clearfix class from : http://www.positioniseverything.net/easyclearing.html

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

edited Dec 28 '08 at 18:14

answered Dec 28 '08 at 18:07

Keith Donegan

26,213
34
94
129

Thank you for the response, but I’m afraid it does not solve the alignment problem. I should have been clearer. My aim is to vertically align the checkboxes / radio buttons with their labels. – Jan Zich Dec 28 '08 at 18:23
You can do this with my code. Play about with the margin on the label, and you can also add this to the input element if you want. So the label { margin: 10px 0px 0px 10px; float: left; } would push the label down 10 pixels. – Keith Donegan Dec 28 '08 at 18:43
3

You can do that, but one of the points in the original question was not to assume anything about sizes of radio buttons / checkboxes. Most likely my question was too optimistic. – Jan Zich Dec 28 '08 at 18:49

score 4 · Answer 5 · answered Jul 08 '09 at 22:34

4

This is a bit of a hack but this CSS seems to get it working very nicely in all browsers the same as using tables (apart from chrome)

input[type=radio] { vertical-align: middle; margin: 0; *margin-top: -2px; }
label { vertical-align: middle; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
 input[type=radio] { margin-top: -2px; }
}

Make sure you use labels with your radios for it to work. i.e.

<option> <label>My Radio</label>

answered Jul 08 '09 at 22:34

Justin Vincent

1,329
2
14
22

The media thing helped me a lot with mobile devices. Thx! – Sven van Zoelen Aug 20 '16 at 16:49

score 3 · Answer 6 · answered Jan 09 '11 at 13:07

If your label is long and goes on multiple rows setting the width and display:inline-block will help.

.form-field * {
  vertical-align: middle;
}
.form-field input {
  clear:left;
}
.form-field label { 
  width:200px;
  display:inline-block;
}

<div class="form-field">
    <input id="option1" type="radio" name="opt" value="1"/>
    <label for="option1">Option 1 is very long and is likely to go on two lines.</label>
    <input id="option2" type="radio" name="opt" value="2"/>
    <label for="option2">Option 2 might fit into one line.</label>
</div>

score 2 · Answer 7 · answered Oct 21 '10 at 23:38

2

I found the best fix for this was to give the input a height that matches the label. At least this fixed my problem with inconsistencies in Firefox and IE.

input { height: 18px; margin: 0; float: left; }
label { height: 18px; float: left; }

<li>
  <input id="option1" type="radio" name="opt" />
  <label for="option1">Option 1</label>
</li>

answered Oct 21 '10 at 23:38

Angus

21
1

Matching height fixed my radios. Not checkboxes but not worried as our site.css is fairly complex. – SushiGuy Sep 09 '13 at 18:48

Kin · Answer 8 · 2011-04-19T19:26:44.703

2

The following code should work :)

Regards,


<style type="text/css">
input[type=checkbox] {
    margin-bottom: 4px;
    vertical-align: middle;
}

label {
    vertical-align: middle;
}
</style>


<input id="checkBox1" type="checkbox" /><label for="checkBox1">Show assets</label><br />
<input id="checkBox2" type="checkbox" /><label for="checkBox2">Show detectors</label><br />

edited Apr 19 '11 at 19:26

answered Apr 19 '11 at 19:20

Kin

1,522
1
13
11

score 1 · Answer 9 · answered Jan 06 '13 at 07:21

Below I will insert a checkbox dynamically. Style is included to align the checkbox and most important to make sure word wrap is straight. the most important thing here is display: table-cell; for the alignment

The visual basic code.

'the code to dynamically insert a checkbox

Dim tbl As Table = New Table()
Dim tc1 As TableCell = New TableCell()
tc1.CssClass = "tdCheckTablecell"

'get the data for this checkbox
Dim ds As DataSet
Dim Company As ina.VullenCheckbox
Company = New ina.VullenCheckbox
Company.IDVeldenperScherm = HETid
Company.IDLoginBedrijf = HttpContext.Current.Session("welkbedrijf")
ds = Company.GetsDataVullenCheckbox("K_GetS_VullenCheckboxMasterDDLOmschrijvingVC") 'ds6

'create the checkbox

Dim radio As CheckBoxList = New CheckBoxList
radio.DataSource = ds
radio.ID = HETid
radio.CssClass = "tdCheck"
radio.DataTextField = "OmschrijvingVC"
radio.DataValueField = "IDVullenCheckbox"
radio.Attributes.Add("onclick", "documentChanged();")
radio.DataBind()

'connect the checkbox

tc1.Controls.Add(radio)
tr.Cells.Add(tc1)
tbl.Rows.Add(tr)

'the style for the checkbox

input[type="checkbox"] {float: left;   width: 5%; height:20px; border: 1px solid black; }

.tdCheck label {     width: 90%;display: table-cell;    align:right;}

.tdCheck {width:100%;}

and the HTML output

<head id="HEAD1">
    <title>
        name
    </title>
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" /><meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE" />
</head>
<style type='text/css'>
input[type="checkbox"] {float: left;   width: 20px; height:20px;  }
.tdCheck label {     width: 90%;display: table-cell;    align:right;}
.tdCheck {width:100%;}
.tdLabel {width:100px;}
.tdCheckTableCell {width:400px;}
TABLE
{

vertical-align:top;
border:1;border-style:solid;margin:0;padding:0;border-spacing:0;
border-color:red;
}
TD
{
vertical-align:top; /*labels ed en de items in het datagrid*/
border: 1;  border-style:solid;
border-color:green;
    font-size:30px  }
</style>
<body id="bodyInternet"  > 
    <form name="Form2" method="post" action="main.aspx?B" id="Form2">
        <table border="0">
            <tr>
                <td class="tdLabel">
                    <span id="ctl16_ID{A}" class="DynamicLabel">
                        TITLE
                    </span>
                </td>
                <td class="tdCheckTablecell">
                    <table id="ctl16_{A}" class="tdCheck" onclick="documentChanged();" border="0">
                        <tr>
                            <td>
                                <input id="ctl16_{A}_0" type="checkbox" name="ctl16${A}$0" />
                                <label for="ctl16_{A}_0">
                                    this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp  
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="ctl16_{A}_1" type="checkbox" name="ctl16${A}$1" />
                                <label for="ctl16_{A}_1">
                                    ITEM2
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="ctl16_{A}_2" type="checkbox" name="ctl16${A}$2" />
                                <label for="ctl16_{A}_2">
                                    ITEM3
                                </label>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
</form>
</body>

score 1 · Answer 10 · answered Aug 22 '13 at 10:42

1

@sfjedi

I've created a class and assigned the css values to it.

.radioA{
   vertical-align: middle;
}

It is working and you can check it in the below link. http://jsfiddle.net/gNVsC/ Hope it was useful.

answered Aug 22 '13 at 10:42

Fight code with code

194
1
8

score 1 · Answer 11 · edited Jun 21 '11 at 18:19

1

This is a simple solution which solved the problem for me:

label 
{

/* for firefox */
vertical-align:middle; 

/*for internet explorer */
*bottom:3px;
*position:relative; 

padding-bottom:7px; 

}

edited Jun 21 '11 at 18:19

Oben Sonne

9,893
2
40
61

answered Jun 21 '11 at 08:27

Dunx

11
1

score 1 · Answer 12 · edited Nov 29 '11 at 21:30

There are several ways to implement it:

For ASP.NET Standard CheckBox:

.tdInputCheckBox
{ 
position:relative;
top:-2px;
}
<table>
        <tr>
            <td class="tdInputCheckBox">                  
                <asp:CheckBox ID="chkMale" runat="server" Text="Male" />
                <asp:CheckBox ID="chkFemale" runat="server" Text="Female" />
            </td>
        </tr>
</table>

For DevExpress CheckBox:

<dx:ASPxCheckBox ID="chkAccept" runat="server" Text="Yes" Layout="Flow"/>
<dx:ASPxCheckBox ID="chkAccept" runat="server" Text="No" Layout="Flow"/>

For RadioButtonList:

<asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
   <asp:ListItem>Yes</asp:ListItem>
   <asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>

For Required Field Validators:

<asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqEmailId" runat="server" ErrorMessage="Email id is required." Display="Dynamic" ControlToValidate="txtEmailId"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regexEmailId" runat="server" ErrorMessage="Invalid Email Id." ControlToValidate="txtEmailId" Text="*"></asp:RegularExpressionValidator>`

score -1 · Answer 13 · answered Jun 22 '17 at 10:31

-1

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

answered Jun 22 '17 at 10:31

Marizabel Camargo

1
3

This doesn't work for me on Firefox 58 , is it some kind of nonstandard CSS? – Konrad Höffner Feb 15 '18 at 11:16

Radio/checkbox alignment in HTML/CSS

13 Answers13

Linked