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    lt table gt   lt tr gt       lt td gt  lt input type  radio  name  opt  gt  lt  td gt       lt td gt Option 1 lt  td gt   lt  tr gt   lt tr gt       lt td gt  lt input type  radio  name  opt  gt  lt  td gt       lt td gt Option 2 lt  td gt   lt  tr gt   lt  table gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I wouldn t use tables for this at all  CSS can easily do this    I would do something like this       lt p class  clearfix  gt         lt input id  option1  type  radio  name  opt    gt         lt label for  option1  gt Option 1 lt  label gt      lt  p gt   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

User · Answer

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     lt head id  HEAD1  gt       lt title gt          name      lt  title gt       lt meta content  Microsoft Visual Studio  NET 7 1  name  GENERATOR    gt  lt meta content  Visual Basic  NET 7 1  name  CODE LANGUAGE    gt   lt  head gt   lt style type  text css  gt  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     lt  style gt   lt body id  bodyInternet    gt        lt form name  Form2  method  post  action  main aspx B  id  Form2  gt           lt table border  0  gt               lt tr gt                   lt td class  tdLabel  gt                       lt span id  ctl16 ID A   class  DynamicLabel  gt                          TITLE                      lt  span gt                   lt  td gt                   lt td class  tdCheckTablecell  gt                       lt table id  ctl16  A   class  tdCheck  onclick  documentChanged     border  0  gt                           lt tr gt                               lt td gt                                   lt input id  ctl16  A  0  type  checkbox  name  ctl16  A  0    gt                                   lt label for  ctl16  A  0  gt                                      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                                    lt  label gt                               lt  td gt                           lt  tr gt                           lt tr gt                               lt td gt                                   lt input id  ctl16  A  1  type  checkbox  name  ctl16  A  1    gt                                   lt label for  ctl16  A  1  gt                                      ITEM2                                  lt  label gt                               lt  td gt                           lt  tr gt                           lt tr gt                               lt td gt                                   lt input id  ctl16  A  2  type  checkbox  name  ctl16  A  2    gt                                   lt label for  ctl16  A  2  gt                                      ITEM3                                  lt  label gt                               lt  td gt                           lt  tr gt                       lt  table gt                   lt  td gt               lt  tr gt           lt  table gt   lt  form gt   lt  body gt

User · Answer

The following works in Firefox and Opera  sorry  I do not have access to other browsers at the moment     lt div class  form-field  gt       lt input id  option1  type  radio  name  opt   gt       lt label for  option1  gt Option 1 lt  label gt   lt  div gt    The CSS    form-field         vertical-align  middle

User · Answer

I wouldn t use tables for this at all  CSS can easily do this    I would do something like this       lt p class  clearfix  gt         lt input id  option1  type  radio  name  opt    gt         lt label for  option1  gt Option 1 lt  label gt      lt  p gt   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

User · Answer

x000D   x000D  input type  radio    input type  checkbox     x000D      vertical-align  middle  x000D      margin-top  -1  x000D    x000D   x000D   x000D

User · Answer

The following code should work     Regards        lt style type  text css  gt  input type checkbox        margin-bottom  4px      vertical-align  middle     label       vertical-align  middle     lt  style gt     lt input id  checkBox1  type  checkbox    gt  lt label for  checkBox1  gt Show assets lt  label gt  lt br   gt   lt input id  checkBox2  type  checkbox    gt  lt label for  checkBox2  gt Show detectors lt  label gt  lt br   gt

User · Answer

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      lt div class  form-field  gt       lt input id  option1  type  radio  name  opt  value  1   gt       lt label for  option1  gt Option 1 is very long and is likely to go on two lines  lt  label gt       lt input id  option2  type  radio  name  opt  value  2   gt       lt label for  option2  gt Option 2 might fit into one line  lt  label gt   lt  div gt

User · Answer

The following works in Firefox and Opera  sorry  I do not have access to other browsers at the moment     lt div class  form-field  gt       lt input id  option1  type  radio  name  opt   gt       lt label for  option1  gt Option 1 lt  label gt   lt  div gt    The CSS    form-field         vertical-align  middle

User · Answer

The following works in Firefox and Opera  sorry  I do not have access to other browsers at the moment     lt div class  form-field  gt       lt input id  option1  type  radio  name  opt   gt       lt label for  option1  gt Option 1 lt  label gt   lt  div gt    The CSS    form-field         vertical-align  middle

User · Answer

I think I have finally solved the problem  One commonly recommended solution is to use vertical-align  middle    lt input type  radio  style  vertical-align  middle  gt  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    lt input type  radio  style  vertical-align  middle  margin  0px   gt  Label   It is still interesting to note that in the table based solution the margins are somehow eaten and everything aligns nicely

User · Answer

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      lt div class  form-field  gt       lt input id  option1  type  radio  name  opt  value  1   gt       lt label for  option1  gt Option 1 is very long and is likely to go on two lines  lt  label gt       lt input id  option2  type  radio  name  opt  value  2   gt       lt label for  option2  gt Option 2 might fit into one line  lt  label gt   lt  div gt

User · Answer

There are several ways to implement it    For ASP NET Standard CheckBox    tdInputCheckBox    position relative  top -2px     lt table gt           lt tr gt               lt td class  tdInputCheckBox  gt                                     lt asp CheckBox ID  chkMale  runat  server  Text  Male    gt                   lt asp CheckBox ID  chkFemale  runat  server  Text  Female    gt               lt  td gt           lt  tr gt   lt  table gt   For DevExpress CheckBox    lt dx ASPxCheckBox ID  chkAccept  runat  server  Text  Yes  Layout  Flow   gt   lt dx ASPxCheckBox ID  chkAccept  runat  server  Text  No  Layout  Flow   gt   For RadioButtonList    lt asp RadioButtonList ID  rdoAccept  runat  server  RepeatDirection  Horizontal  gt      lt asp ListItem gt Yes lt  asp ListItem gt      lt asp ListItem gt No lt  asp ListItem gt   lt  asp RadioButtonList gt   For Required Field Validators                                    lt asp TextBox ID  txtEmailId  runat  server  gt  lt  asp TextBox gt   lt asp RequiredFieldValidator ID  reqEmailId  runat  server  ErrorMessage  Email id is required   Display  Dynamic  ControlToValidate  txtEmailId  gt  lt  asp RequiredFieldValidator gt   lt asp RegularExpressionValidator ID  regexEmailId  runat  server  ErrorMessage  Invalid Email Id   ControlToValidate  txtEmailId  Text     gt  lt  asp RegularExpressionValidator gt

User · Answer

The following works in Firefox and Opera  sorry  I do not have access to other browsers at the moment     lt div class  form-field  gt       lt input id  option1  type  radio  name  opt   gt       lt label for  option1  gt Option 1 lt  label gt   lt  div gt    The CSS    form-field         vertical-align  middle

User · Answer

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

User · Answer

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    lt option gt   lt label gt My Radio lt  label gt

User · Answer

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

User · Answer

There are several ways to implement it    For ASP NET Standard CheckBox    tdInputCheckBox    position relative  top -2px     lt table gt           lt tr gt               lt td class  tdInputCheckBox  gt                                     lt asp CheckBox ID  chkMale  runat  server  Text  Male    gt                   lt asp CheckBox ID  chkFemale  runat  server  Text  Female    gt               lt  td gt           lt  tr gt   lt  table gt   For DevExpress CheckBox    lt dx ASPxCheckBox ID  chkAccept  runat  server  Text  Yes  Layout  Flow   gt   lt dx ASPxCheckBox ID  chkAccept  runat  server  Text  No  Layout  Flow   gt   For RadioButtonList    lt asp RadioButtonList ID  rdoAccept  runat  server  RepeatDirection  Horizontal  gt      lt asp ListItem gt Yes lt  asp ListItem gt      lt asp ListItem gt No lt  asp ListItem gt   lt  asp RadioButtonList gt   For Required Field Validators                                    lt asp TextBox ID  txtEmailId  runat  server  gt  lt  asp TextBox gt   lt asp RequiredFieldValidator ID  reqEmailId  runat  server  ErrorMessage  Email id is required   Display  Dynamic  ControlToValidate  txtEmailId  gt  lt  asp RequiredFieldValidator gt   lt asp RegularExpressionValidator ID  regexEmailId  runat  server  ErrorMessage  Invalid Email Id   ControlToValidate  txtEmailId  Text     gt  lt  asp RegularExpressionValidator gt

User · Answer

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     lt head id  HEAD1  gt       lt title gt          name      lt  title gt       lt meta content  Microsoft Visual Studio  NET 7 1  name  GENERATOR    gt  lt meta content  Visual Basic  NET 7 1  name  CODE LANGUAGE    gt   lt  head gt   lt style type  text css  gt  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     lt  style gt   lt body id  bodyInternet    gt        lt form name  Form2  method  post  action  main aspx B  id  Form2  gt           lt table border  0  gt               lt tr gt                   lt td class  tdLabel  gt                       lt span id  ctl16 ID A   class  DynamicLabel  gt                          TITLE                      lt  span gt                   lt  td gt                   lt td class  tdCheckTablecell  gt                       lt table id  ctl16  A   class  tdCheck  onclick  documentChanged     border  0  gt                           lt tr gt                               lt td gt                                   lt input id  ctl16  A  0  type  checkbox  name  ctl16  A  0    gt                                   lt label for  ctl16  A  0  gt                                      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                                    lt  label gt                               lt  td gt                           lt  tr gt                           lt tr gt                               lt td gt                                   lt input id  ctl16  A  1  type  checkbox  name  ctl16  A  1    gt                                   lt label for  ctl16  A  1  gt                                      ITEM2                                  lt  label gt                               lt  td gt                           lt  tr gt                           lt tr gt                               lt td gt                                   lt input id  ctl16  A  2  type  checkbox  name  ctl16  A  2    gt                                   lt label for  ctl16  A  2  gt                                      ITEM3                                  lt  label gt                               lt  td gt                           lt  tr gt                       lt  table gt                   lt  td gt               lt  tr gt           lt  table gt   lt  form gt   lt  body gt

User · Answer

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

User · Answer

The following code should work     Regards        lt style type  text css  gt  input type checkbox        margin-bottom  4px      vertical-align  middle     label       vertical-align  middle     lt  style gt     lt input id  checkBox1  type  checkbox    gt  lt label for  checkBox1  gt Show assets lt  label gt  lt br   gt   lt input id  checkBox2  type  checkbox    gt  lt label for  checkBox2  gt Show detectors lt  label gt  lt br   gt

User · Answer

I think I have finally solved the problem  One commonly recommended solution is to use vertical-align  middle    lt input type  radio  style  vertical-align  middle  gt  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    lt input type  radio  style  vertical-align  middle  margin  0px   gt  Label   It is still interesting to note that in the table based solution the margins are somehow eaten and everything aligns nicely

User · Answer

I wouldn t use tables for this at all  CSS can easily do this    I would do something like this       lt p class  clearfix  gt         lt input id  option1  type  radio  name  opt    gt         lt label for  option1  gt Option 1 lt  label gt      lt  p gt   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

User · Answer

I wouldn t use tables for this at all  CSS can easily do this    I would do something like this       lt p class  clearfix  gt         lt input id  option1  type  radio  name  opt    gt         lt label for  option1  gt Option 1 lt  label gt      lt  p gt   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

User · Answer

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      lt li gt     lt input id  option1  type  radio  name  opt    gt     lt label for  option1  gt Option 1 lt  label gt   lt  li gt

User · Answer

x000D   x000D  input type  radio    input type  checkbox     x000D      vertical-align  middle  x000D      margin-top  -1  x000D    x000D   x000D   x000D

User · Answer

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    lt option gt   lt label gt My Radio lt  label gt

User · Answer

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      lt li gt     lt input id  option1  type  radio  name  opt    gt     lt label for  option1  gt Option 1 lt  label gt   lt  li gt

[html] Radio/checkbox alignment in HTML/CSS

Examples related to html

Examples related to css

Examples related to checkbox

Examples related to radio-button