How to align checkboxes and their labels consistently cross-browsers

Question

This is one of the minor CSS problems that plagues me constantly   How do folks around Stack Overflow vertically align checkboxes and their labels consistently cross-browser   Whenever I align them correctly in Safari  usually using vertical-align  baseline on the input   they re completely off in Firefox and IE   Fix it in Firefox  and Safari and IE are inevitably messed up  I waste time on this every time I code a form   Here s the standard code that I work with    x000D   x000D   lt form gt  x000D       lt div gt  x000D           lt label gt  lt input type  checkbox    gt  Label text lt  label gt  x000D       lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    I usually use Eric Meyer s reset  so form elements are relatively clean of overrides  Looking forward to any tips or tricks that you have to offer

User · Answer

I found out one way to do it that gives the same result in almost all browsers. At the very least up-to-date browsers. It works in Firefox, Chrome, Safari, Opera. In IE it will just look almost as if there were no rules applied for inputs or labels (i.e., it'll still have the label a few pixels below the input), so I think it's excusable.

HTML

<label class="boxfix"><input type="radio">Label</label>

CSS

.boxfix {
    vertical-align: bottom;
}
.boxfix input {
    margin: 0;
    vertical-align: bottom;
    position: relative;
    top: 1.999px; /* the inputs are slightly more centered in IE at 1px (they don't interpret the .999 here), and Opera will round it to 2px with three decimals */
}

User · Answer

Sometimes vertical-align needs two inline  span  label  input  etc     elements next to each other to work properly  The following checkboxes are properly vertically centered in IE  Safari  FF  and Chrome  even if the text size is very small or large   They all float next to each other on the same line  but the nowrap means that the whole label text always stays next to the checkbox   The downside is the extra meaningless SPAN tags     x000D   x000D   checkboxes label   x000D    display  inline-block  x000D    padding-right  10px  x000D    white-space  nowrap  x000D    x000D   checkboxes input   x000D    vertical-align  middle  x000D    x000D   checkboxes label span   x000D    vertical-align  middle  x000D    x000D   lt form gt  x000D     lt div class  checkboxes  gt  x000D       lt label for  x  gt  lt input type  checkbox  id  x    gt   lt span gt Label text x lt  span gt  lt  label gt  x000D       lt label for  y  gt  lt input type  checkbox  id  y    gt   lt span gt Label text y lt  span gt  lt  label gt  x000D       lt label for  z  gt  lt input type  checkbox  id  z    gt   lt span gt Label text z lt  span gt  lt  label gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    Now  if you had a very long label text that needed to wrap without wrapping under the checkbox  you d use padding and negative text indent on the label elements    x000D   x000D   checkboxes label   x000D    display  block  x000D    padding-right  10px  x000D    padding-left  22px  x000D    text-indent  -22px  x000D    x000D   checkboxes input   x000D    vertical-align  middle  x000D    x000D   checkboxes label span   x000D    vertical-align  middle  x000D    x000D   lt form gt  x000D     lt div class  checkboxes  gt  x000D       lt label for  x  gt  lt input type  checkbox  id  x    gt   lt span gt Label text x so long that it will probably wrap so let s see how it goes with the proposed CSS  expected  two lines are aligned nicely  lt  span gt  lt  label gt  x000D       lt label for  y  gt  lt input type  checkbox  id  y    gt   lt span gt Label text y lt  span gt  lt  label gt  x000D       lt label for  z  gt  lt input type  checkbox  id  z    gt   lt span gt Label text z lt  span gt  lt  label gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Hardcode the checkbox s height and width  remove its padding  and make its height plus vertical margins equal to the label s line-height  If the label text is inline  float the checkbox  Firefox  Chrome  and IE7  all render the following example identically  http   www kornea com css-checkbox-align

User · Answer

The only perfectly working solution for me is   input type checkbox   input type radio        vertical-align  -2px      margin  0      padding  0      Tested today in Chrome  Firefox  Opera  IE 7 and 8  Example  Fiddle

User · Answer

The only perfectly working solution for me is   input type checkbox   input type radio        vertical-align  -2px      margin  0      padding  0      Tested today in Chrome  Firefox  Opera  IE 7 and 8  Example  Fiddle

User · Answer

CSS    threeCol  listItem       width 13 9em      padding  2em      margin  2em      float left      border-bottom solid  f3f3f3 1px     threeCol input       float left      width auto      margin  2em  2em  2em 0      border none      background none     threeCol label       float left      margin  1em 0  1em 0      HTML    lt div class  threeCol  gt       lt div class  listItem  gt           lt input type  checkbox  name  name  id  id  value  checkbox1    gt           lt label for  name  gt This is your checkBox lt  label gt       lt  div gt   lt  div gt    The above code will place your list items in threecols and just change widths to suit

User · Answer

The following gives pixel-perfect consistency across browsers  even IE9   The approach is quite sensible  to the point of being obvious    Create an input and a label  Display them as block  so you can float them as you like  Set the height and the line-height to the same value to ensure they center and align vertically  For em measurements  to calculate the height of the elements  the browser must know the height of the font for those elements  and it must not itself be set in em measurements    This results in a globally applicable general rule   input  label  display block float left height 1em line-height 1em     With font size adaptable per form  fieldset or element    myform input   myform label  font-size 20px     Tested in latest Chrome  Safari  and Firefox on Mac  Windows  Iphone  and Android  And IE9   This method is likely applicable to all input types that are not higher than one line of text  Apply a type rule to suit

User · Answer

I usually use line height in order to adjust the vertical position of my static text    x000D   x000D  label   x000D    line-height  18px  x000D    x000D  input   x000D    width  13px  x000D    height  18px  x000D    font-size  12px  x000D    line-height  12px  x000D    x000D   lt form gt  x000D     lt div gt  x000D       lt label gt  lt input type  checkbox    gt  Label text lt  label gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    Hope that helps

User · Answer

input       margin  0      actually does the trick

User · Answer

I usually leave a checkbox unlabeled and then make its  label  a separate element   It s a pain  but there s so much cross-browser difference between how checkboxes and their labels are displayed  as you ve noticed  that this is the only way I can come close to controlling how everything looks   I also end up doing this in winforms development  for the same reason   I think the fundamental problem with the checkbox control is that it is really two different controls   the box and the label   By using a checkbox  you re leaving it up to the implementers of the control to decide how those two elements are displayed next to each other  and they always get it wrong  where wrong   not what you want    I really hope someone has a better answer to your question

User · Answer

Working off of One Crayon s solution  I have something that works for me and is simpler    x000D   x000D   font2  font-family Arial  font-size 32px     Sample font    x000D   x000D  input type checkbox   input type radio    x000D    vertical-align  middle  x000D    position  relative  x000D    bottom  1px  x000D    x000D   x000D  input type radio     x000D    bottom  2px   x000D     x000D   lt label gt  lt input type  checkbox    gt  Label text lt  label gt  x000D   lt p class  font2  gt  x000D     lt label gt  lt input type  checkbox   gt  Label text lt  label gt  x000D   lt  p gt  x000D   x000D   x000D    Renders pixel-for-pixel the same in Safari  whose baseline I trust  and both Firefox and IE7 check out as good   It also works for various label font sizes  big and small  Now  for fixing IE s baseline on selects and inputs       Update   Third-Party Edit   The proper bottom position depends on font-family and font-size  I found using bottom   08em  for checkbox  amp  radio elements is a good general value  I tested it in Chrome Firefox IE11 in windows with Arial  amp  Calibri fonts using several small mid large font-sizes    x000D   x000D   font2   font2 input  font-family Arial  font-size 32px     Sample font    x000D   x000D  input type checkbox   input type radio    x000D    vertical-align  middle   x000D    position  relative  x000D    bottom   08em     this is a better value for different fonts     x000D    x000D   lt label gt  lt input type  checkbox    gt  Label text lt  label gt   x000D   x000D   lt p class  font2  gt  x000D     lt label gt  lt input type  checkbox   gt  Label text lt  label gt  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

CSS    threeCol  listItem       width 13 9em      padding  2em      margin  2em      float left      border-bottom solid  f3f3f3 1px     threeCol input       float left      width auto      margin  2em  2em  2em 0      border none      background none     threeCol label       float left      margin  1em 0  1em 0      HTML    lt div class  threeCol  gt       lt div class  listItem  gt           lt input type  checkbox  name  name  id  id  value  checkbox1    gt           lt label for  name  gt This is your checkBox lt  label gt       lt  div gt   lt  div gt    The above code will place your list items in threecols and just change widths to suit

User · Answer

I usually leave a checkbox unlabeled and then make its  label  a separate element   It s a pain  but there s so much cross-browser difference between how checkboxes and their labels are displayed  as you ve noticed  that this is the only way I can come close to controlling how everything looks   I also end up doing this in winforms development  for the same reason   I think the fundamental problem with the checkbox control is that it is really two different controls   the box and the label   By using a checkbox  you re leaving it up to the implementers of the control to decide how those two elements are displayed next to each other  and they always get it wrong  where wrong   not what you want    I really hope someone has a better answer to your question

User · Answer

I usually use line height in order to adjust the vertical position of my static text    x000D   x000D  label   x000D    line-height  18px  x000D    x000D  input   x000D    width  13px  x000D    height  18px  x000D    font-size  12px  x000D    line-height  12px  x000D    x000D   lt form gt  x000D     lt div gt  x000D       lt label gt  lt input type  checkbox    gt  Label text lt  label gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    Hope that helps

User · Answer

With an input type checkbox wrapped inside the label and floated to the left like so    lt label for  id  class  checkbox  gt       lt input type  checkbox  id  id  gt       lt span gt The Label lt  span gt   lt  label gt    this worked for me   label checkbox       display  block     checkbox input       float  left      height  18px      vertical-align  middle     checkbox span       float  left      line-height  18px      margin  0 0 0 20px      Make sure the height of the  is identical to the line-height of the  blocklevel

User · Answer

If you use ASP NET Web Forms you don t need to worry about DIVs and other elements or fixed sizes  We can align the  lt asp CheckBoxList gt  text by setting float left to the CheckboxList input type in CSS   Please check the following example code    CheckboxList       font-size  14px      color   333333     CheckboxList input       float  left      clear  both       ASPX code    lt asp CheckBoxList runat  server  ID  c1  RepeatColumns  2  CssClass  CheckboxList  gt   lt  asp CheckBoxList gt

User · Answer

x000D   x000D   lt form gt  x000D       lt div gt  x000D           lt label style  display  inline-block  gt  x000D               lt input style  vertical-align  middle  type  checkbox    gt  x000D               lt span style  vertical-align  middle  gt Label text lt  span gt  x000D            lt  label gt  x000D       lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    The trick is to use vertical-align only in table cells or inline-block if using label tag

User · Answer

Warning   This answer is too old and doesn t work on modern browsers   I m not the poster of this answer  but at the time of writing this  this is the most voted answer by far in both positive and negative votes   1035 -17   and it s still marked as accepted answer  probably because the original poster of the question is the one who wrote this answer   As already noted many times in the comments  this answer does not work on most browsers anymore  and seems to be failing to do that since 2013    After over an hour of tweaking  testing  and trying different styles of markup  I think I may have a decent solution   The requirements for this particular project were   Inputs must be on their own line  Checkbox inputs need to align vertically with the label text similarly  if not identically  across all browsers  If the label text wraps  it needs to be indented  so no wrapping down underneath the checkbox    Before I get into any explanation  I ll just give you the code   x000D   x000D  label     display  block    padding-left  15px    text-indent  -15px    input     width  13px    height  13px    padding  0    margin 0    vertical-align  bottom    position  relative    top  -1px     overflow  hidden    x000D   lt form gt     lt div gt       lt label gt  lt input type  checkbox    gt  Label text lt  label gt     lt  div gt   lt  form gt  x000D   x000D   x000D   Here is the working example in JSFiddle  This code assumes that you re using a reset like Eric Meyer s that doesn t override form input margins and padding  hence putting margin and padding resets in the input CSS    Obviously in a live environment you ll probably be nesting overriding stuff to support other input elements  but I wanted to keep things simple  Things to note   The  overflow declaration is an inline IE hack  the star-property hack    Both IE 6 and 7 will notice it  but Safari and Firefox will properly ignore it  I think it might be valid CSS  but you re still better off with conditional comments  just used it for simplicity  As best I can tell  the only vertical-align statement that was consistent across browsers was vertical-align  bottom   Setting this and then relatively positioning upwards behaved almost identically in Safari  Firefox and IE with only a pixel or two of discrepancy  The major problem in working with alignment is that IE sticks a bunch of mysterious space around input elements   It isn t padding or margin  and it s damned persistent   Setting a width and height on the checkbox and then overflow  hidden for some reason cuts off the extra space and allows IE s positioning to act very similarly to Safari and Firefox  Depending on your text sizing  you ll no doubt need to adjust the relative positioning  width  height  and so forth to get things looking right   Hope this helps someone else   I haven t tried this specific technique on any projects other than the one I was working on this morning  so definitely pipe up if you find something that works more consistently   Warning  This answer is too old and doesn t work on modern browsers

User · Answer

lt fieldset class  checks  gt       lt legend gt checks for whatevers lt  legend gt       lt input type    id  x    gt       lt label for  x  gt Label lt  label gt       lt input type    id  y    gt       lt label for  y  gt Label lt  label gt       lt input type    id  z    gt       lt label for  z  gt Label lt  label gt   lt  fieldset gt    You should wrap form controls grouped together in their own fieldsets anyways  here  it plays the wrappa  set input label do display block  input float left  label float right  set your widths  control spacing with left right margins  align label text accordingly    so  fieldset checks       width 200px    checks input   checks label       display block     checks input       float right      width 10px      margin-right 5px    checks label       float left      width 180px      margin-left 5px      text-align left      text-indent 5px     you probably need to set border  outline and line-height on both as well for cross-browser media solutions

User · Answer

This works well for me    x000D   x000D  fieldset   x000D    text-align left  x000D    border none x000D    x000D  fieldset ol  fieldset ul   x000D    padding 0  x000D    list-style none x000D    x000D  fieldset li   x000D    padding-bottom 1 5em  x000D    float none  x000D    clear left x000D    x000D  label   x000D    float left  x000D    width 7em  x000D    margin-right 1em x000D    x000D  fieldset checkboxes li   x000D    clear both  x000D    padding  75em x000D    x000D  fieldset checkboxes label   x000D    margin 0 0 0 1em  x000D    width 20em x000D    x000D  fieldset checkboxes input   x000D    float left x000D    x000D   lt form gt  x000D     lt fieldset class  checkboxes  gt  x000D       lt ul gt  x000D         lt li gt  x000D           lt input type  checkbox  name  happy  value  yep  id  happy    gt  x000D           lt label for  happy  gt Happy  lt  label gt  x000D         lt  li gt  x000D         lt li gt  x000D           lt input type  checkbox  name  hungry  value  yep  id  hungry    gt  x000D           lt label for  hungry  gt Hungry  lt  label gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  fieldset gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

I usually leave a checkbox unlabeled and then make its  label  a separate element   It s a pain  but there s so much cross-browser difference between how checkboxes and their labels are displayed  as you ve noticed  that this is the only way I can come close to controlling how everything looks   I also end up doing this in winforms development  for the same reason   I think the fundamental problem with the checkbox control is that it is really two different controls   the box and the label   By using a checkbox  you re leaving it up to the implementers of the control to decide how those two elements are displayed next to each other  and they always get it wrong  where wrong   not what you want    I really hope someone has a better answer to your question

User · Answer

I usually use line height in order to adjust the vertical position of my static text    x000D   x000D  label   x000D    line-height  18px  x000D    x000D  input   x000D    width  13px  x000D    height  18px  x000D    font-size  12px  x000D    line-height  12px  x000D    x000D   lt form gt  x000D     lt div gt  x000D       lt label gt  lt input type  checkbox    gt  Label text lt  label gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    Hope that helps

User · Answer

Maybe some folk are making the same mistake I did  Which was    I had set a width for the  input boxes  because they were mostly of type  text    but then forgotten to over-ride that width for checkboxes - so my checkbox was trying to occupy a lot of excess width and so it was tough to align a label beside it    checkboxlabel       width  100       vertical-align  middle     checkbox       width  20px  important       lt label for  acheckbox  class  checkboxlabel  gt       lt input name  acheckbox  id  acheckbox  type  checkbox  class  checkbox  gt Contact me lt  label gt    Gives clickable labels and and proper alignment as far back as IE6  using a class selector  and in late versions of Firefox  Safari and Chrome

User · Answer

I think this is the easiest way   x000D   x000D  input   x000D      position  relative  x000D      top  1px  x000D    x000D   lt form gt  x000D       lt div gt  x000D           lt label gt  lt input type  checkbox    gt  Label text lt  label gt  x000D       lt  div gt  x000D   lt form gt  x000D   x000D   x000D

User · Answer

So I know this has been answered many times  but I feel I have a way more elegant solution than those that have been provided already  And not only 1 elegant solution  but 2 separate solutions to tickle your fancy  With that said  everything you need to know and see are contained in 2 JS Fiddle s  with comments     Solution  1 relies on the native  Checkbox  of the given browser  though with a twist    Its contained in a div which is easier to position cross-browser  with an overflow  hidden to chop the excess of a 1px stretched checkbox  this is so you cant see the ugly borders of FF   Simple HTML   follow the link to review the css with comments  code block is to satisfy stackoverflow  http   jsfiddle net KQghJ    lt label gt  lt div class  checkbox  gt  lt input type  checkbox    gt  lt  div gt  Label text lt  label gt      Solution  2 uses the  Checkbox Toggle Hack  to toggle the CSS state of a DIV  which has been properly positioned across browser  and setup with a simple sprite for the checkbox unchecked and checked states  All that is needed is to adjust the background-position with said Checkbox Toggle Hack  This  in my opinion  is the more elegant solution as you have more control over your checkboxes  amp  radios  and can guarantee they look the same across browser   Simple HTML   follow the link to review the CSS with comments  code block is to satisfy StackOverflow  http   jsfiddle net Sx5M2    lt label gt  lt input type  checkbox    gt  lt div class  checkbox  gt  lt  div gt Label text lt  label gt      If anyone disagree s with these methods  please leave me a comment  I would love to hear some feedback on why others have not come across these solutions  or if they have  why I see no answers here regarding them  If anyone sees one of these methods fail  it would be nice to see that too  but these have been tested in the latest browsers and rely on HTML   CSS methods that are quite old  and universal as far as I have seen

User · Answer

I don t like relative positioning because it makes element rendered above everything else on its level  it can get on top of something if you have complex layout    I ve discovered that vertical-align  sub makes checkboxes look good enough aligned in Chrome  Firefox and Opera  Can t check Safari since I don t have MacOS and IE10 is slightly off  but I ve found it to be good enough solution for me   Another solution might be to try and make specific CSS for every browser and fine-tune it with some vertical-align in   pixels EMs  http   css-tricks com snippets css browser-specific-hacks

User · Answer

Try my solution  I tried it in IE 6  FF2 and Chrome and it renders pixel by pixel in all the three browsers    x000D   x000D      x000D    padding  0px  x000D    margin  0px  x000D    x000D   wb   x000D    width  15px  x000D    height  15px  x000D    float  left  x000D    x000D   somelabel   x000D    float  left  x000D    padding-left  3px  x000D    x000D   lt div gt  x000D     lt input id  wb  type  checkbox    gt  x000D     lt label for  wb  id  somelabel  gt Web Browser lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

lt fieldset class  checks  gt       lt legend gt checks for whatevers lt  legend gt       lt input type    id  x    gt       lt label for  x  gt Label lt  label gt       lt input type    id  y    gt       lt label for  y  gt Label lt  label gt       lt input type    id  z    gt       lt label for  z  gt Label lt  label gt   lt  fieldset gt    You should wrap form controls grouped together in their own fieldsets anyways  here  it plays the wrappa  set input label do display block  input float left  label float right  set your widths  control spacing with left right margins  align label text accordingly    so  fieldset checks       width 200px    checks input   checks label       display block     checks input       float right      width 10px      margin-right 5px    checks label       float left      width 180px      margin-left 5px      text-align left      text-indent 5px     you probably need to set border  outline and line-height on both as well for cross-browser media solutions

User · Answer

I have not completely tested my solution  but it seems to work great   My HTML is simply    lt label class  checkbox  gt  lt input type  checkbox  value  0000  gt 0000 - 0100 lt  label gt    I then set all checkboxes to 24px for both height and width  To make the text aligned I make the label s line-height also 24px and assign vertical-align  top  like so   EDIT  After IE testing I added vertical-align  bottom  to the input and changed the label s CSS  You may find you need a conditional IE css case to sort out padding - but the text and box are inline    x000D   x000D  input type  checkbox     x000D      width  24px  x000D      height  24px  x000D      vertical-align  bottom  x000D    x000D  label checkbox   x000D      vertical-align  top  x000D      line-height  24px  x000D      margin  2px 0  x000D      display  block  x000D      height  24px  x000D    x000D   lt label class  checkbox  gt  lt input type  checkbox  value  0000  gt 0000 - 0100 lt  label gt  x000D   lt label class  checkbox  gt  lt input type  checkbox  value  0100  gt 0100 - 0200 lt  label gt  x000D   lt label class  checkbox  gt  lt input type  checkbox  value  0200  gt 0200 - 0300 lt  label gt  x000D   lt label class  checkbox  gt  lt input type  checkbox  value  0300  gt 0300 - 0400 lt  label gt  x000D   x000D   x000D    If anyone finds that this doesn t work  please kindly let me know  Here is it in action  in Chrome and IE - apologies as screenshots were taken on retina and using parallels for IE

User · Answer

For consistency with form fields across browsers we use   box-sizing  border-box  button  checkbox  input  radio  textarea  submit  reset  search  any-form-field       -moz-box-sizing  border-box      -webkit-box-sizing  border-box      box-sizing  border-box

User · Answer

input       margin  0      actually does the trick

User · Answer

If you use ASP NET Web Forms you don t need to worry about DIVs and other elements or fixed sizes  We can align the  lt asp CheckBoxList gt  text by setting float left to the CheckboxList input type in CSS   Please check the following example code    CheckboxList       font-size  14px      color   333333     CheckboxList input       float  left      clear  both       ASPX code    lt asp CheckBoxList runat  server  ID  c1  RepeatColumns  2  CssClass  CheckboxList  gt   lt  asp CheckBoxList gt

User · Answer

The following gives pixel-perfect consistency across browsers  even IE9   The approach is quite sensible  to the point of being obvious    Create an input and a label  Display them as block  so you can float them as you like  Set the height and the line-height to the same value to ensure they center and align vertically  For em measurements  to calculate the height of the elements  the browser must know the height of the font for those elements  and it must not itself be set in em measurements    This results in a globally applicable general rule   input  label  display block float left height 1em line-height 1em     With font size adaptable per form  fieldset or element    myform input   myform label  font-size 20px     Tested in latest Chrome  Safari  and Firefox on Mac  Windows  Iphone  and Android  And IE9   This method is likely applicable to all input types that are not higher than one line of text  Apply a type rule to suit

User · Answer

I ve never had a problem with doing it like this    lt form gt     lt div gt       lt input type  checkbox  id  cb    gt   lt label for  cb  gt Label text lt  label gt     lt  div gt   lt  form gt

User · Answer

Yay thanks  This too has been driving me nuts forever    In my particular case  this worked for me   input       width  13px      height  13px      padding  0      margin 0      vertical-align  top      position  relative       top  1px       overflow  hidden    label       display  block      padding  0      padding-left  15px      text-indent  -15px      border  0px solid      margin-left  5px      vertical-align  top      I am using the reset css which might explain some of the differences  but this seems to work well for me

User · Answer

I don t like relative positioning because it makes element rendered above everything else on its level  it can get on top of something if you have complex layout    I ve discovered that vertical-align  sub makes checkboxes look good enough aligned in Chrome  Firefox and Opera  Can t check Safari since I don t have MacOS and IE10 is slightly off  but I ve found it to be good enough solution for me   Another solution might be to try and make specific CSS for every browser and fine-tune it with some vertical-align in   pixels EMs  http   css-tricks com snippets css browser-specific-hacks

User · Answer

try vertical-align  middle  also your code seems like it should be   x000D   x000D   lt form gt  x000D       lt div gt  x000D           lt input id  blah  type  checkbox  gt  lt label for  blah  gt Label text lt  label gt  x000D       lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Try my solution  I tried it in IE 6  FF2 and Chrome and it renders pixel by pixel in all the three browsers    x000D   x000D      x000D    padding  0px  x000D    margin  0px  x000D    x000D   wb   x000D    width  15px  x000D    height  15px  x000D    float  left  x000D    x000D   somelabel   x000D    float  left  x000D    padding-left  3px  x000D    x000D   lt div gt  x000D     lt input id  wb  type  checkbox    gt  x000D     lt label for  wb  id  somelabel  gt Web Browser lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D  input type checkbox  x000D    x000D      vertical-align  middle  x000D     x000D   lt input id  testCheckbox  name  testCheckbox  type  checkbox  gt  x000D   lt label for  testCheckbox  gt I should align lt  label gt  x000D   x000D   x000D

User · Answer

try vertical-align  middle  also your code seems like it should be   x000D   x000D   lt form gt  x000D       lt div gt  x000D           lt input id  blah  type  checkbox  gt  lt label for  blah  gt Label text lt  label gt  x000D       lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Warning   This answer is too old and doesn t work on modern browsers   I m not the poster of this answer  but at the time of writing this  this is the most voted answer by far in both positive and negative votes   1035 -17   and it s still marked as accepted answer  probably because the original poster of the question is the one who wrote this answer   As already noted many times in the comments  this answer does not work on most browsers anymore  and seems to be failing to do that since 2013    After over an hour of tweaking  testing  and trying different styles of markup  I think I may have a decent solution   The requirements for this particular project were   Inputs must be on their own line  Checkbox inputs need to align vertically with the label text similarly  if not identically  across all browsers  If the label text wraps  it needs to be indented  so no wrapping down underneath the checkbox    Before I get into any explanation  I ll just give you the code   x000D   x000D  label     display  block    padding-left  15px    text-indent  -15px    input     width  13px    height  13px    padding  0    margin 0    vertical-align  bottom    position  relative    top  -1px     overflow  hidden    x000D   lt form gt     lt div gt       lt label gt  lt input type  checkbox    gt  Label text lt  label gt     lt  div gt   lt  form gt  x000D   x000D   x000D   Here is the working example in JSFiddle  This code assumes that you re using a reset like Eric Meyer s that doesn t override form input margins and padding  hence putting margin and padding resets in the input CSS    Obviously in a live environment you ll probably be nesting overriding stuff to support other input elements  but I wanted to keep things simple  Things to note   The  overflow declaration is an inline IE hack  the star-property hack    Both IE 6 and 7 will notice it  but Safari and Firefox will properly ignore it  I think it might be valid CSS  but you re still better off with conditional comments  just used it for simplicity  As best I can tell  the only vertical-align statement that was consistent across browsers was vertical-align  bottom   Setting this and then relatively positioning upwards behaved almost identically in Safari  Firefox and IE with only a pixel or two of discrepancy  The major problem in working with alignment is that IE sticks a bunch of mysterious space around input elements   It isn t padding or margin  and it s damned persistent   Setting a width and height on the checkbox and then overflow  hidden for some reason cuts off the extra space and allows IE s positioning to act very similarly to Safari and Firefox  Depending on your text sizing  you ll no doubt need to adjust the relative positioning  width  height  and so forth to get things looking right   Hope this helps someone else   I haven t tried this specific technique on any projects other than the one I was working on this morning  so definitely pipe up if you find something that works more consistently   Warning  This answer is too old and doesn t work on modern browsers

User · Answer

try vertical-align  middle  also your code seems like it should be   x000D   x000D   lt form gt  x000D       lt div gt  x000D           lt input id  blah  type  checkbox  gt  lt label for  blah  gt Label text lt  label gt  x000D       lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

This works well for me    x000D   x000D  fieldset   x000D    text-align left  x000D    border none x000D    x000D  fieldset ol  fieldset ul   x000D    padding 0  x000D    list-style none x000D    x000D  fieldset li   x000D    padding-bottom 1 5em  x000D    float none  x000D    clear left x000D    x000D  label   x000D    float left  x000D    width 7em  x000D    margin-right 1em x000D    x000D  fieldset checkboxes li   x000D    clear both  x000D    padding  75em x000D    x000D  fieldset checkboxes label   x000D    margin 0 0 0 1em  x000D    width 20em x000D    x000D  fieldset checkboxes input   x000D    float left x000D    x000D   lt form gt  x000D     lt fieldset class  checkboxes  gt  x000D       lt ul gt  x000D         lt li gt  x000D           lt input type  checkbox  name  happy  value  yep  id  happy    gt  x000D           lt label for  happy  gt Happy  lt  label gt  x000D         lt  li gt  x000D         lt li gt  x000D           lt input type  checkbox  name  hungry  value  yep  id  hungry    gt  x000D           lt label for  hungry  gt Hungry  lt  label gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  fieldset gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

try this code  input type  checkbox         -moz-appearance  checkbox      -webkit-appearance  checkbox      margin-left 3px      border 0      vertical-align  middle      top  -1px      bottom  1px       overflow  hidden      box-sizing  border-box     1         height  13px     Removes excess padding in IE 7         width  13px      background   fff

User · Answer

This works well for me    x000D   x000D  fieldset   x000D    text-align left  x000D    border none x000D    x000D  fieldset ol  fieldset ul   x000D    padding 0  x000D    list-style none x000D    x000D  fieldset li   x000D    padding-bottom 1 5em  x000D    float none  x000D    clear left x000D    x000D  label   x000D    float left  x000D    width 7em  x000D    margin-right 1em x000D    x000D  fieldset checkboxes li   x000D    clear both  x000D    padding  75em x000D    x000D  fieldset checkboxes label   x000D    margin 0 0 0 1em  x000D    width 20em x000D    x000D  fieldset checkboxes input   x000D    float left x000D    x000D   lt form gt  x000D     lt fieldset class  checkboxes  gt  x000D       lt ul gt  x000D         lt li gt  x000D           lt input type  checkbox  name  happy  value  yep  id  happy    gt  x000D           lt label for  happy  gt Happy  lt  label gt  x000D         lt  li gt  x000D         lt li gt  x000D           lt input type  checkbox  name  hungry  value  yep  id  hungry    gt  x000D           lt label for  hungry  gt Hungry  lt  label gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  fieldset gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

If you re using Twitter Bootstrap  you can just use the checkbox class on the  lt label gt     lt label class  checkbox  gt       lt input type  checkbox  gt  Remember me  lt  label gt

User · Answer

One easy thing that seems to work well is to apply a adjust the vertical position of the checkbox with vertical-align   It will still be vary across browsers  but the solution is uncomplicated   input       vertical-align  -2px      Reference

User · Answer

Try my solution  I tried it in IE 6  FF2 and Chrome and it renders pixel by pixel in all the three browsers    x000D   x000D      x000D    padding  0px  x000D    margin  0px  x000D    x000D   wb   x000D    width  15px  x000D    height  15px  x000D    float  left  x000D    x000D   somelabel   x000D    float  left  x000D    padding-left  3px  x000D    x000D   lt div gt  x000D     lt input id  wb  type  checkbox    gt  x000D     lt label for  wb  id  somelabel  gt Web Browser lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Working off of One Crayon s solution  I have something that works for me and is simpler    x000D   x000D   font2  font-family Arial  font-size 32px     Sample font    x000D   x000D  input type checkbox   input type radio    x000D    vertical-align  middle  x000D    position  relative  x000D    bottom  1px  x000D    x000D   x000D  input type radio     x000D    bottom  2px   x000D     x000D   lt label gt  lt input type  checkbox    gt  Label text lt  label gt  x000D   lt p class  font2  gt  x000D     lt label gt  lt input type  checkbox   gt  Label text lt  label gt  x000D   lt  p gt  x000D   x000D   x000D    Renders pixel-for-pixel the same in Safari  whose baseline I trust  and both Firefox and IE7 check out as good   It also works for various label font sizes  big and small  Now  for fixing IE s baseline on selects and inputs       Update   Third-Party Edit   The proper bottom position depends on font-family and font-size  I found using bottom   08em  for checkbox  amp  radio elements is a good general value  I tested it in Chrome Firefox IE11 in windows with Arial  amp  Calibri fonts using several small mid large font-sizes    x000D   x000D   font2   font2 input  font-family Arial  font-size 32px     Sample font    x000D   x000D  input type checkbox   input type radio    x000D    vertical-align  middle   x000D    position  relative  x000D    bottom   08em     this is a better value for different fonts     x000D    x000D   lt label gt  lt input type  checkbox    gt  Label text lt  label gt   x000D   x000D   lt p class  font2  gt  x000D     lt label gt  lt input type  checkbox   gt  Label text lt  label gt  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

I think this is the easiest way   x000D   x000D  input   x000D      position  relative  x000D      top  1px  x000D    x000D   lt form gt  x000D       lt div gt  x000D           lt label gt  lt input type  checkbox    gt  Label text lt  label gt  x000D       lt  div gt  x000D   lt form gt  x000D   x000D   x000D

User · Answer

So I know this has been answered many times  but I feel I have a way more elegant solution than those that have been provided already  And not only 1 elegant solution  but 2 separate solutions to tickle your fancy  With that said  everything you need to know and see are contained in 2 JS Fiddle s  with comments     Solution  1 relies on the native  Checkbox  of the given browser  though with a twist    Its contained in a div which is easier to position cross-browser  with an overflow  hidden to chop the excess of a 1px stretched checkbox  this is so you cant see the ugly borders of FF   Simple HTML   follow the link to review the css with comments  code block is to satisfy stackoverflow  http   jsfiddle net KQghJ    lt label gt  lt div class  checkbox  gt  lt input type  checkbox    gt  lt  div gt  Label text lt  label gt      Solution  2 uses the  Checkbox Toggle Hack  to toggle the CSS state of a DIV  which has been properly positioned across browser  and setup with a simple sprite for the checkbox unchecked and checked states  All that is needed is to adjust the background-position with said Checkbox Toggle Hack  This  in my opinion  is the more elegant solution as you have more control over your checkboxes  amp  radios  and can guarantee they look the same across browser   Simple HTML   follow the link to review the CSS with comments  code block is to satisfy StackOverflow  http   jsfiddle net Sx5M2    lt label gt  lt input type  checkbox    gt  lt div class  checkbox  gt  lt  div gt Label text lt  label gt      If anyone disagree s with these methods  please leave me a comment  I would love to hear some feedback on why others have not come across these solutions  or if they have  why I see no answers here regarding them  If anyone sees one of these methods fail  it would be nice to see that too  but these have been tested in the latest browsers and rely on HTML   CSS methods that are quite old  and universal as far as I have seen

User · Answer

Sometimes vertical-align needs two inline  span  label  input  etc     elements next to each other to work properly  The following checkboxes are properly vertically centered in IE  Safari  FF  and Chrome  even if the text size is very small or large   They all float next to each other on the same line  but the nowrap means that the whole label text always stays next to the checkbox   The downside is the extra meaningless SPAN tags     x000D   x000D   checkboxes label   x000D    display  inline-block  x000D    padding-right  10px  x000D    white-space  nowrap  x000D    x000D   checkboxes input   x000D    vertical-align  middle  x000D    x000D   checkboxes label span   x000D    vertical-align  middle  x000D    x000D   lt form gt  x000D     lt div class  checkboxes  gt  x000D       lt label for  x  gt  lt input type  checkbox  id  x    gt   lt span gt Label text x lt  span gt  lt  label gt  x000D       lt label for  y  gt  lt input type  checkbox  id  y    gt   lt span gt Label text y lt  span gt  lt  label gt  x000D       lt label for  z  gt  lt input type  checkbox  id  z    gt   lt span gt Label text z lt  span gt  lt  label gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    Now  if you had a very long label text that needed to wrap without wrapping under the checkbox  you d use padding and negative text indent on the label elements    x000D   x000D   checkboxes label   x000D    display  block  x000D    padding-right  10px  x000D    padding-left  22px  x000D    text-indent  -22px  x000D    x000D   checkboxes input   x000D    vertical-align  middle  x000D    x000D   checkboxes label span   x000D    vertical-align  middle  x000D    x000D   lt form gt  x000D     lt div class  checkboxes  gt  x000D       lt label for  x  gt  lt input type  checkbox  id  x    gt   lt span gt Label text x so long that it will probably wrap so let s see how it goes with the proposed CSS  expected  two lines are aligned nicely  lt  span gt  lt  label gt  x000D       lt label for  y  gt  lt input type  checkbox  id  y    gt   lt span gt Label text y lt  span gt  lt  label gt  x000D       lt label for  z  gt  lt input type  checkbox  id  z    gt   lt span gt Label text z lt  span gt  lt  label gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

The chosen answer with 400  upvotes did not work for me in Chrome 28 OSX  probably because it wasn t tested in OSX or that it did work in whatever was around in 2008 when this question was answered   The times have changed  and new CSS3 solutions are now feasible  My solution uses pseudoelements to create a custom checkbox  So the stipulations  pros or cons  however you look at it  are as follows    Only works in modern browsers  FF3 6   IE9   Chrome  Safari  Relies on a custom designed checkbox  that will be rendered exactly the same in every browser OS  Here I ve just chosen some simple colors  but you could always add linear gradients and such to give it more of a bang  Is geared to a certain font font size  which if changed  you d simply change the positioning and size of the checkbox to make it appear vertically aligned  If tweaked correctly  the end result should still be near to exactly the same in all browser   operating systems  No vertical-alignment properties  no floats Must use the provided markup in my example  it will not work if structured like the question  however  the layout will essentially look the same  If you want to move things around  you ll have to also move the associated CSS    x000D   x000D  div checkbox   x000D      position  relative  x000D      font-family  Arial  x000D      font-size  13px  x000D    x000D  label   x000D      position  relative  x000D      padding-left  16px  x000D    x000D  label  before   x000D      content      x000D      display  inline-block  x000D      width  10px  x000D      height  10px  x000D      background-color  white  x000D      border  solid 1px  9C9C9C  x000D      position  absolute  x000D      top  1px  x000D      left  0px  x000D    x000D  label  after   x000D      content     x000D      width  8px  x000D      height  8px  x000D      background-color   666666  x000D      position  absolute  x000D      left  2px  x000D      top  3px  x000D      display  none  x000D    x000D  input type checkbox    x000D      visibility  hidden  x000D      position  absolute  x000D    x000D  input type checkbox  checked   label  after   x000D      display  block  x000D    x000D  input type checkbox  active   label  before   x000D      background-color   DDDDDD  x000D    x000D   lt form gt  x000D       lt div class  checkbox  gt  x000D           lt input id  check me  type checkbox   gt  x000D           lt label for  check me  gt Label for checkbox lt  label gt  x000D       lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    This solution hides the checkbox  and adds and styles pseudoelements to the label to create the visible checkbox  Because the label is tied to the hidden checkbox  the input field will still get updated and the value will be submitted with the form   And if you re interested  here s my take on radio buttons  http   jsfiddle net DtKrV 2   Hope someone finds this useful

User · Answer

For consistency with form fields across browsers we use   box-sizing  border-box  button  checkbox  input  radio  textarea  submit  reset  search  any-form-field       -moz-box-sizing  border-box      -webkit-box-sizing  border-box      box-sizing  border-box

User · Answer

Now that flexbox is supported in all modern browsers  something like this seems like an easier approach to me    lt style gt  label     display  flex    align-items  center    input type radio   input type checkbox     flex  none     lt  style gt   lt form gt     lt div gt       lt label gt  lt input type  checkbox    gt  Label text lt  label gt     lt  div gt   lt  form gt     Here s the complete prefixed version demo    x000D   x000D  label   x000D   display  -webkit-box  x000D   display  -webkit-flex  x000D   display  -ms-flexbox  x000D   display  flex  x000D   -webkit-box-align  center  x000D   -webkit-align-items  center  x000D   -ms-flex-align  center  x000D   align-items  center  x000D    x000D  input type radio    x000D  input type checkbox    x000D   -webkit-box-flex  0  x000D   -webkit-flex  none  x000D   -ms-flex  none  x000D   flex  none  x000D   margin-right  10px   x000D    x000D     demo only  to show alignment     x000D  form   x000D    max-width  200px x000D    x000D   lt form gt  x000D     lt label gt  x000D       lt input type  radio  checked gt  x000D      I am an aligned radio and label x000D     lt  label gt  x000D     lt label gt  x000D         lt input type  checkbox  checked gt  x000D      I am an aligned checkbox and label x000D     lt  label gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

I usually leave a checkbox unlabeled and then make its  label  a separate element   It s a pain  but there s so much cross-browser difference between how checkboxes and their labels are displayed  as you ve noticed  that this is the only way I can come close to controlling how everything looks   I also end up doing this in winforms development  for the same reason   I think the fundamental problem with the checkbox control is that it is really two different controls   the box and the label   By using a checkbox  you re leaving it up to the implementers of the control to decide how those two elements are displayed next to each other  and they always get it wrong  where wrong   not what you want    I really hope someone has a better answer to your question

User · Answer

Use simply vertical-align  sub  as pokrishka already suggested   Fiddle  HTML Code    lt div class  checkboxes  gt       lt label for  check1  gt Test lt  label gt       lt input id  check1  type  checkbox  gt  lt  input gt   lt  div gt    CSS Code    checkboxes input       vertical-align  sub

User · Answer

The chosen answer with 400  upvotes did not work for me in Chrome 28 OSX  probably because it wasn t tested in OSX or that it did work in whatever was around in 2008 when this question was answered   The times have changed  and new CSS3 solutions are now feasible  My solution uses pseudoelements to create a custom checkbox  So the stipulations  pros or cons  however you look at it  are as follows    Only works in modern browsers  FF3 6   IE9   Chrome  Safari  Relies on a custom designed checkbox  that will be rendered exactly the same in every browser OS  Here I ve just chosen some simple colors  but you could always add linear gradients and such to give it more of a bang  Is geared to a certain font font size  which if changed  you d simply change the positioning and size of the checkbox to make it appear vertically aligned  If tweaked correctly  the end result should still be near to exactly the same in all browser   operating systems  No vertical-alignment properties  no floats Must use the provided markup in my example  it will not work if structured like the question  however  the layout will essentially look the same  If you want to move things around  you ll have to also move the associated CSS    x000D   x000D  div checkbox   x000D      position  relative  x000D      font-family  Arial  x000D      font-size  13px  x000D    x000D  label   x000D      position  relative  x000D      padding-left  16px  x000D    x000D  label  before   x000D      content      x000D      display  inline-block  x000D      width  10px  x000D      height  10px  x000D      background-color  white  x000D      border  solid 1px  9C9C9C  x000D      position  absolute  x000D      top  1px  x000D      left  0px  x000D    x000D  label  after   x000D      content     x000D      width  8px  x000D      height  8px  x000D      background-color   666666  x000D      position  absolute  x000D      left  2px  x000D      top  3px  x000D      display  none  x000D    x000D  input type checkbox    x000D      visibility  hidden  x000D      position  absolute  x000D    x000D  input type checkbox  checked   label  after   x000D      display  block  x000D    x000D  input type checkbox  active   label  before   x000D      background-color   DDDDDD  x000D    x000D   lt form gt  x000D       lt div class  checkbox  gt  x000D           lt input id  check me  type checkbox   gt  x000D           lt label for  check me  gt Label for checkbox lt  label gt  x000D       lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    This solution hides the checkbox  and adds and styles pseudoelements to the label to create the visible checkbox  Because the label is tied to the hidden checkbox  the input field will still get updated and the value will be submitted with the form   And if you re interested  here s my take on radio buttons  http   jsfiddle net DtKrV 2   Hope someone finds this useful

User · Answer

Simple solution    lt label style  display block  gt     lt input style  vertical-align middle  type  checkbox  gt     lt span  style  vertical-align middle  gt Label lt  span gt   lt  label gt    Tested in Chrome  Firefox  IE9   Safari  iOS 9

User · Answer

Use simply vertical-align  sub  as pokrishka already suggested   Fiddle  HTML Code    lt div class  checkboxes  gt       lt label for  check1  gt Test lt  label gt       lt input id  check1  type  checkbox  gt  lt  input gt   lt  div gt    CSS Code    checkboxes input       vertical-align  sub

User · Answer

I ve never had a problem with doing it like this    lt form gt     lt div gt       lt input type  checkbox  id  cb    gt   lt label for  cb  gt Label text lt  label gt     lt  div gt   lt  form gt

User · Answer

position  relative  has some issues in IE with z-index and animations like jQuery s slideUp slideDown   CSS   input type checkbox   input type radio        vertical-align  baseline      position  relative      top  3px      margin  0 3px 0 0      padding  0px    input ie7 type checkbox   input ie7 type radio        vertical-align  middle      position  static      margin-bottom  -2px      height  13px      width  13px      jQuery     document  ready function          if    browser msie  amp  amp    browser version  lt   7               input type checkbox    addClass  ie7               input type radio    addClass  ie7                The styling probably needs tweaks depending on the font-size used in  lt label gt   PS  I use ie7js to make the css work in IE6

User · Answer

I usually use line height in order to adjust the vertical position of my static text    x000D   x000D  label   x000D    line-height  18px  x000D    x000D  input   x000D    width  13px  x000D    height  18px  x000D    font-size  12px  x000D    line-height  12px  x000D    x000D   lt form gt  x000D     lt div gt  x000D       lt label gt  lt input type  checkbox    gt  Label text lt  label gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    Hope that helps

User · Answer

With an input type checkbox wrapped inside the label and floated to the left like so    lt label for  id  class  checkbox  gt       lt input type  checkbox  id  id  gt       lt span gt The Label lt  span gt   lt  label gt    this worked for me   label checkbox       display  block     checkbox input       float  left      height  18px      vertical-align  middle     checkbox span       float  left      line-height  18px      margin  0 0 0 20px      Make sure the height of the  is identical to the line-height of the  blocklevel

User · Answer

Warning   This answer is too old and doesn t work on modern browsers   I m not the poster of this answer  but at the time of writing this  this is the most voted answer by far in both positive and negative votes   1035 -17   and it s still marked as accepted answer  probably because the original poster of the question is the one who wrote this answer   As already noted many times in the comments  this answer does not work on most browsers anymore  and seems to be failing to do that since 2013    After over an hour of tweaking  testing  and trying different styles of markup  I think I may have a decent solution   The requirements for this particular project were   Inputs must be on their own line  Checkbox inputs need to align vertically with the label text similarly  if not identically  across all browsers  If the label text wraps  it needs to be indented  so no wrapping down underneath the checkbox    Before I get into any explanation  I ll just give you the code   x000D   x000D  label     display  block    padding-left  15px    text-indent  -15px    input     width  13px    height  13px    padding  0    margin 0    vertical-align  bottom    position  relative    top  -1px     overflow  hidden    x000D   lt form gt     lt div gt       lt label gt  lt input type  checkbox    gt  Label text lt  label gt     lt  div gt   lt  form gt  x000D   x000D   x000D   Here is the working example in JSFiddle  This code assumes that you re using a reset like Eric Meyer s that doesn t override form input margins and padding  hence putting margin and padding resets in the input CSS    Obviously in a live environment you ll probably be nesting overriding stuff to support other input elements  but I wanted to keep things simple  Things to note   The  overflow declaration is an inline IE hack  the star-property hack    Both IE 6 and 7 will notice it  but Safari and Firefox will properly ignore it  I think it might be valid CSS  but you re still better off with conditional comments  just used it for simplicity  As best I can tell  the only vertical-align statement that was consistent across browsers was vertical-align  bottom   Setting this and then relatively positioning upwards behaved almost identically in Safari  Firefox and IE with only a pixel or two of discrepancy  The major problem in working with alignment is that IE sticks a bunch of mysterious space around input elements   It isn t padding or margin  and it s damned persistent   Setting a width and height on the checkbox and then overflow  hidden for some reason cuts off the extra space and allows IE s positioning to act very similarly to Safari and Firefox  Depending on your text sizing  you ll no doubt need to adjust the relative positioning  width  height  and so forth to get things looking right   Hope this helps someone else   I haven t tried this specific technique on any projects other than the one I was working on this morning  so definitely pipe up if you find something that works more consistently   Warning  This answer is too old and doesn t work on modern browsers

User · Answer

x000D   x000D  input type checkbox  x000D    x000D      vertical-align  middle  x000D     x000D   lt input id  testCheckbox  name  testCheckbox  type  checkbox  gt  x000D   lt label for  testCheckbox  gt I should align lt  label gt  x000D   x000D   x000D

User · Answer

Simple solution    lt label style  display block  gt     lt input style  vertical-align middle  type  checkbox  gt     lt span  style  vertical-align middle  gt Label lt  span gt   lt  label gt    Tested in Chrome  Firefox  IE9   Safari  iOS 9

User · Answer

This works well for me    x000D   x000D  fieldset   x000D    text-align left  x000D    border none x000D    x000D  fieldset ol  fieldset ul   x000D    padding 0  x000D    list-style none x000D    x000D  fieldset li   x000D    padding-bottom 1 5em  x000D    float none  x000D    clear left x000D    x000D  label   x000D    float left  x000D    width 7em  x000D    margin-right 1em x000D    x000D  fieldset checkboxes li   x000D    clear both  x000D    padding  75em x000D    x000D  fieldset checkboxes label   x000D    margin 0 0 0 1em  x000D    width 20em x000D    x000D  fieldset checkboxes input   x000D    float left x000D    x000D   lt form gt  x000D     lt fieldset class  checkboxes  gt  x000D       lt ul gt  x000D         lt li gt  x000D           lt input type  checkbox  name  happy  value  yep  id  happy    gt  x000D           lt label for  happy  gt Happy  lt  label gt  x000D         lt  li gt  x000D         lt li gt  x000D           lt input type  checkbox  name  hungry  value  yep  id  hungry    gt  x000D           lt label for  hungry  gt Hungry  lt  label gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  fieldset gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

If you re using Twitter Bootstrap  you can just use the checkbox class on the  lt label gt     lt label class  checkbox  gt       lt input type  checkbox  gt  Remember me  lt  label gt

User · Answer

Warning   This answer is too old and doesn t work on modern browsers   I m not the poster of this answer  but at the time of writing this  this is the most voted answer by far in both positive and negative votes   1035 -17   and it s still marked as accepted answer  probably because the original poster of the question is the one who wrote this answer   As already noted many times in the comments  this answer does not work on most browsers anymore  and seems to be failing to do that since 2013    After over an hour of tweaking  testing  and trying different styles of markup  I think I may have a decent solution   The requirements for this particular project were   Inputs must be on their own line  Checkbox inputs need to align vertically with the label text similarly  if not identically  across all browsers  If the label text wraps  it needs to be indented  so no wrapping down underneath the checkbox    Before I get into any explanation  I ll just give you the code   x000D   x000D  label     display  block    padding-left  15px    text-indent  -15px    input     width  13px    height  13px    padding  0    margin 0    vertical-align  bottom    position  relative    top  -1px     overflow  hidden    x000D   lt form gt     lt div gt       lt label gt  lt input type  checkbox    gt  Label text lt  label gt     lt  div gt   lt  form gt  x000D   x000D   x000D   Here is the working example in JSFiddle  This code assumes that you re using a reset like Eric Meyer s that doesn t override form input margins and padding  hence putting margin and padding resets in the input CSS    Obviously in a live environment you ll probably be nesting overriding stuff to support other input elements  but I wanted to keep things simple  Things to note   The  overflow declaration is an inline IE hack  the star-property hack    Both IE 6 and 7 will notice it  but Safari and Firefox will properly ignore it  I think it might be valid CSS  but you re still better off with conditional comments  just used it for simplicity  As best I can tell  the only vertical-align statement that was consistent across browsers was vertical-align  bottom   Setting this and then relatively positioning upwards behaved almost identically in Safari  Firefox and IE with only a pixel or two of discrepancy  The major problem in working with alignment is that IE sticks a bunch of mysterious space around input elements   It isn t padding or margin  and it s damned persistent   Setting a width and height on the checkbox and then overflow  hidden for some reason cuts off the extra space and allows IE s positioning to act very similarly to Safari and Firefox  Depending on your text sizing  you ll no doubt need to adjust the relative positioning  width  height  and so forth to get things looking right   Hope this helps someone else   I haven t tried this specific technique on any projects other than the one I was working on this morning  so definitely pipe up if you find something that works more consistently   Warning  This answer is too old and doesn t work on modern browsers

User · Answer

Now that flexbox is supported in all modern browsers  something like this seems like an easier approach to me    lt style gt  label     display  flex    align-items  center    input type radio   input type checkbox     flex  none     lt  style gt   lt form gt     lt div gt       lt label gt  lt input type  checkbox    gt  Label text lt  label gt     lt  div gt   lt  form gt     Here s the complete prefixed version demo    x000D   x000D  label   x000D   display  -webkit-box  x000D   display  -webkit-flex  x000D   display  -ms-flexbox  x000D   display  flex  x000D   -webkit-box-align  center  x000D   -webkit-align-items  center  x000D   -ms-flex-align  center  x000D   align-items  center  x000D    x000D  input type radio    x000D  input type checkbox    x000D   -webkit-box-flex  0  x000D   -webkit-flex  none  x000D   -ms-flex  none  x000D   flex  none  x000D   margin-right  10px   x000D    x000D     demo only  to show alignment     x000D  form   x000D    max-width  200px x000D    x000D   lt form gt  x000D     lt label gt  x000D       lt input type  radio  checked gt  x000D      I am an aligned radio and label x000D     lt  label gt  x000D     lt label gt  x000D         lt input type  checkbox  checked gt  x000D      I am an aligned checkbox and label x000D     lt  label gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Yay thanks  This too has been driving me nuts forever    In my particular case  this worked for me   input       width  13px      height  13px      padding  0      margin 0      vertical-align  top      position  relative       top  1px       overflow  hidden    label       display  block      padding  0      padding-left  15px      text-indent  -15px      border  0px solid      margin-left  5px      vertical-align  top      I am using the reset css which might explain some of the differences  but this seems to work well for me

User · Answer

I ve never had a problem with doing it like this    lt form gt     lt div gt       lt input type  checkbox  id  cb    gt   lt label for  cb  gt Label text lt  label gt     lt  div gt   lt  form gt

User · Answer

This is not the best way of going about solving the issue  vertical-align  middle     Adding style  position relative top 2px   to the input box would move it down 2px  So depending on your font size  you can move it along

User · Answer

I found the only way I could line them up was using position absolute for the input  Playing around with input s top variable got the result I wanted   div     clear     both    float     none    position  relative     input     left      5px    position  absolute    top       3px     label     display      block    margin-left  20px

User · Answer

try this code  input type  checkbox         -moz-appearance  checkbox      -webkit-appearance  checkbox      margin-left 3px      border 0      vertical-align  middle      top  -1px      bottom  1px       overflow  hidden      box-sizing  border-box     1         height  13px     Removes excess padding in IE 7         width  13px      background   fff

User · Answer

Maybe some folk are making the same mistake I did  Which was    I had set a width for the  input boxes  because they were mostly of type  text    but then forgotten to over-ride that width for checkboxes - so my checkbox was trying to occupy a lot of excess width and so it was tough to align a label beside it    checkboxlabel       width  100       vertical-align  middle     checkbox       width  20px  important       lt label for  acheckbox  class  checkboxlabel  gt       lt input name  acheckbox  id  acheckbox  type  checkbox  class  checkbox  gt Contact me lt  label gt    Gives clickable labels and and proper alignment as far back as IE6  using a class selector  and in late versions of Firefox  Safari and Chrome

User · Answer

Sometimes vertical-align needs two inline  span  label  input  etc     elements next to each other to work properly  The following checkboxes are properly vertically centered in IE  Safari  FF  and Chrome  even if the text size is very small or large   They all float next to each other on the same line  but the nowrap means that the whole label text always stays next to the checkbox   The downside is the extra meaningless SPAN tags     x000D   x000D   checkboxes label   x000D    display  inline-block  x000D    padding-right  10px  x000D    white-space  nowrap  x000D    x000D   checkboxes input   x000D    vertical-align  middle  x000D    x000D   checkboxes label span   x000D    vertical-align  middle  x000D    x000D   lt form gt  x000D     lt div class  checkboxes  gt  x000D       lt label for  x  gt  lt input type  checkbox  id  x    gt   lt span gt Label text x lt  span gt  lt  label gt  x000D       lt label for  y  gt  lt input type  checkbox  id  y    gt   lt span gt Label text y lt  span gt  lt  label gt  x000D       lt label for  z  gt  lt input type  checkbox  id  z    gt   lt span gt Label text z lt  span gt  lt  label gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    Now  if you had a very long label text that needed to wrap without wrapping under the checkbox  you d use padding and negative text indent on the label elements    x000D   x000D   checkboxes label   x000D    display  block  x000D    padding-right  10px  x000D    padding-left  22px  x000D    text-indent  -22px  x000D    x000D   checkboxes input   x000D    vertical-align  middle  x000D    x000D   checkboxes label span   x000D    vertical-align  middle  x000D    x000D   lt form gt  x000D     lt div class  checkboxes  gt  x000D       lt label for  x  gt  lt input type  checkbox  id  x    gt   lt span gt Label text x so long that it will probably wrap so let s see how it goes with the proposed CSS  expected  two lines are aligned nicely  lt  span gt  lt  label gt  x000D       lt label for  y  gt  lt input type  checkbox  id  y    gt   lt span gt Label text y lt  span gt  lt  label gt  x000D       lt label for  z  gt  lt input type  checkbox  id  z    gt   lt span gt Label text z lt  span gt  lt  label gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

I have not completely tested my solution  but it seems to work great   My HTML is simply    lt label class  checkbox  gt  lt input type  checkbox  value  0000  gt 0000 - 0100 lt  label gt    I then set all checkboxes to 24px for both height and width  To make the text aligned I make the label s line-height also 24px and assign vertical-align  top  like so   EDIT  After IE testing I added vertical-align  bottom  to the input and changed the label s CSS  You may find you need a conditional IE css case to sort out padding - but the text and box are inline    x000D   x000D  input type  checkbox     x000D      width  24px  x000D      height  24px  x000D      vertical-align  bottom  x000D    x000D  label checkbox   x000D      vertical-align  top  x000D      line-height  24px  x000D      margin  2px 0  x000D      display  block  x000D      height  24px  x000D    x000D   lt label class  checkbox  gt  lt input type  checkbox  value  0000  gt 0000 - 0100 lt  label gt  x000D   lt label class  checkbox  gt  lt input type  checkbox  value  0100  gt 0100 - 0200 lt  label gt  x000D   lt label class  checkbox  gt  lt input type  checkbox  value  0200  gt 0200 - 0300 lt  label gt  x000D   lt label class  checkbox  gt  lt input type  checkbox  value  0300  gt 0300 - 0400 lt  label gt  x000D   x000D   x000D    If anyone finds that this doesn t work  please kindly let me know  Here is it in action  in Chrome and IE - apologies as screenshots were taken on retina and using parallels for IE

User · Answer

One easy thing that seems to work well is to apply a adjust the vertical position of the checkbox with vertical-align   It will still be vary across browsers  but the solution is uncomplicated   input       vertical-align  -2px      Reference

User · Answer

position  relative  has some issues in IE with z-index and animations like jQuery s slideUp slideDown   CSS   input type checkbox   input type radio        vertical-align  baseline      position  relative      top  3px      margin  0 3px 0 0      padding  0px    input ie7 type checkbox   input ie7 type radio        vertical-align  middle      position  static      margin-bottom  -2px      height  13px      width  13px      jQuery     document  ready function          if    browser msie  amp  amp    browser version  lt   7               input type checkbox    addClass  ie7               input type radio    addClass  ie7                The styling probably needs tweaks depending on the font-size used in  lt label gt   PS  I use ie7js to make the css work in IE6

User · Answer

Let s finally take a look at the source of the problem  The checkboxes are rendered using images  one may set custom ones via CSS   Here is an  unchecked  checkbox in FireFox  highlighted with DOM inspector     And here s the same unstyled checkbox in Chrome     You can see the margin  orange   padding is not present  would be shown green   So what s this pseudo-margin on the right and on the bottom of the checkbox  These are parts of the image used for the checkbox  That s why using just vertical-align  middle doesn t really suffice and that s the source of the cross-browser problems   So what can we do about this   One obvious option is     replace the images  Fortunately  one can do this via CSS and replace those with external images  base64  in-CSS  images  in-CSS svg or just pseudo-elements  It s a robust  cross-browser   approach  and here s an example of such adjustment stolen from this question    x000D   x000D   checkbox-custom   x000D    opacity  0  x000D    position  absolute  x000D    x000D   checkbox-custom  x000D   checkbox-custom-label   x000D    display  inline-block  x000D    vertical-align  middle  x000D    margin  5px  x000D    cursor  pointer  x000D    x000D   checkbox-custom    checkbox-custom-label before   x000D    content      x000D    display  inline-block  x000D    background   fff  x000D    border-radius  5px  x000D    border  2px solid  ddd  x000D    vertical-align  middle  x000D    width  10px  x000D    height  10px  x000D    padding  2px  x000D    margin-right  10px  x000D    text-align  center  x000D    x000D   checkbox-custom checked    checkbox-custom-label before   x000D    width  1px  x000D    height  5px  x000D    border  solid blue  x000D    border-width  0 3px 3px 0  x000D    transform  rotate 45deg   x000D    -webkit-transform  rotate 45deg   x000D    -ms-transform  rotate 45deg   x000D    border-radius  0px  x000D    margin  0px 15px 5px 5px  x000D    x000D   lt div gt  x000D     lt input id  checkbox-1  class  checkbox-custom  name  checkbox-1  type  checkbox  gt  x000D     lt label for  checkbox-1  class  checkbox-custom-label  gt First Choice lt  label gt  x000D   lt  div gt  x000D   lt div gt  x000D     lt input id  checkbox-2  class  checkbox-custom  name  checkbox-2  type  checkbox  gt  x000D     lt label for  checkbox-2  class  checkbox-custom-label  gt Second Choice lt  label gt  x000D   lt  div gt  x000D   x000D   x000D    You may want to read some more in-depth articles about such styling like some listed here  it s out of scope of this answer   Ok  still what about no-custom-images-or-pseudo-elements solution   TL DR  looks like this won t work  use custom checkbox instead  First  let s notice that if in other browsers those pseudo-margins inside checkbox icon were arbitrary  there were no consistent solution  To build one  we have to explore the anatomy of such images in existing browsers   So what browsers do have the pseudo-margins in checkboxes  I ve checked out Chrome 75  Vivaldi 2 5  Chromium-based   FireFox 54  don t ask why such outdated   IE 11  Edge 42  Safari     borrowed one for a minute  forgot to check out the version   Only Chrome and Vivaldi has such pseudo-margins  I suspect all Chromium-based browsers as well  like Opera    What s the size of those pseudo-margins  To figure this out one can use a zoomed checkbox    x000D   x000D  input   x000D    zoom  10  x000D    box-shadow  0 0 1px inset  999  x000D    x000D   lt input type checkbox gt  x000D   x000D   x000D    my result is  7  of width height and hence 0 9-1 0px in absolute units  The accuracy may be questioned  though  try different values of zoom for the checkbox  In my tests in both Chrome and Vivaldi the relative size of the pseudo-margin is very different at zoom values 10  20 and at values 11-19           scale seems to be more consistent    x000D   x000D  input   x000D    transform  scale 10  translate 50   50    x000D    box-shadow  0 0 1px inset  999  x000D    x000D   lt input type checkbox gt  x000D   x000D   x000D    so probably  14  and 2px are the correct values   Now that we know     the size of the pseudo-margin  let s note this is not enough  Are the sizes of the checkbox icons the same for all browsers  Alas  Here s what DOM inspector shows for unstyled checkboxes    FireFox  13 3px Chromium-based  12 8px for the whole thing  hence 12 8  100  - 14     11px for what is visually perceived as checkbox IE 11  Edge  13px Safari  n a  these should be compared on the same screen  I believe    Now before we discuss any solutions or tricks  let s ask  what is a correct alignment  What are we trying to achieve  To certain point it s a matter of taste  but basically I can think of the following  nice  alignments  aspects   text and checkbox on the same baseline  I deliberately don t adjust checkbox size here      or have same middle line in terms of lowercase letters     or same middle line in terms of capital letters  it s easier to see the difference for different font size      and also we have to decide whether the size of the checkbox should be equal to the height of a lowercase letter  a capital letter or something else  bigger  smaller or between lowercase and capital    For this discussion let s call an alignment nice if the checkbox is on the same baseline as the text and has the size of a capital letter  a highly arguable choice      Now what tools do we have to    adjust checkbox size recognize Chromium with its pseudo-margined checkbox and set specific styles adjust checkbox label vertical alignment       Regarding the checkbox size adjustment  there are width  height  size  zoom  scale  have I missed something    zoom and scale don t allow to set absolute size  so they may help only with adjusting to text size  not set cross-browser size  unless we can write browser-specific rules   size doesn t work with Chrome  did it work with old IE  anyway  it s not that interesting   width and height work in Chrome and other browsers  so we can set a common size  but again  in Chrome it sets the size of the whole image  not the checkbox itself  Note  it is minimum width  height  which defines a checkbox s size  if width   height  the area outside checkbox square is added to  pseudo-margin     An unfortunate thing is  the pseudo-margins in Chrome checkbox are not set to zero for any width and heights  as far as I can see  I m afraid there s no reliable CSS-only method these days  Let s consider vertical alignment  vertical-align can t give consistent results when set to middle or baseline because of the Chrome s pseudo-margin  the only real option to get the same  coordinate system  for all the browsers is to align label and input to the top      on the picture  vertical-align  top  bottom and bottom without box-shadow    So what result do we get from this    x000D   x000D  input type  checkbox     x000D      height  0 95em  x000D      width  0 95em  x000D    x000D  label  input   x000D      vertical-align  top  x000D    x000D   lt label gt  lt input type  checkbox  gt label lt  label gt  x000D   x000D   x000D    The snippet above works with Chrome  Chromium-based browsers   but other browsers require a smaller size of the checkbox  It seems to be impossible to adjust both the size and vertical alignment in a way that works around Chromium s checkbox image quirk  My final suggestion is  use custom checkboxes instead     and you ll avoid frustration

User · Answer

I found the only way I could line them up was using position absolute for the input  Playing around with input s top variable got the result I wanted   div     clear     both    float     none    position  relative     input     left      5px    position  absolute    top       3px     label     display      block    margin-left  20px

User · Answer

Sometimes vertical-align needs two inline  span  label  input  etc     elements next to each other to work properly  The following checkboxes are properly vertically centered in IE  Safari  FF  and Chrome  even if the text size is very small or large   They all float next to each other on the same line  but the nowrap means that the whole label text always stays next to the checkbox   The downside is the extra meaningless SPAN tags     x000D   x000D   checkboxes label   x000D    display  inline-block  x000D    padding-right  10px  x000D    white-space  nowrap  x000D    x000D   checkboxes input   x000D    vertical-align  middle  x000D    x000D   checkboxes label span   x000D    vertical-align  middle  x000D    x000D   lt form gt  x000D     lt div class  checkboxes  gt  x000D       lt label for  x  gt  lt input type  checkbox  id  x    gt   lt span gt Label text x lt  span gt  lt  label gt  x000D       lt label for  y  gt  lt input type  checkbox  id  y    gt   lt span gt Label text y lt  span gt  lt  label gt  x000D       lt label for  z  gt  lt input type  checkbox  id  z    gt   lt span gt Label text z lt  span gt  lt  label gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    Now  if you had a very long label text that needed to wrap without wrapping under the checkbox  you d use padding and negative text indent on the label elements    x000D   x000D   checkboxes label   x000D    display  block  x000D    padding-right  10px  x000D    padding-left  22px  x000D    text-indent  -22px  x000D    x000D   checkboxes input   x000D    vertical-align  middle  x000D    x000D   checkboxes label span   x000D    vertical-align  middle  x000D    x000D   lt form gt  x000D     lt div class  checkboxes  gt  x000D       lt label for  x  gt  lt input type  checkbox  id  x    gt   lt span gt Label text x so long that it will probably wrap so let s see how it goes with the proposed CSS  expected  two lines are aligned nicely  lt  span gt  lt  label gt  x000D       lt label for  y  gt  lt input type  checkbox  id  y    gt   lt span gt Label text y lt  span gt  lt  label gt  x000D       lt label for  z  gt  lt input type  checkbox  id  z    gt   lt span gt Label text z lt  span gt  lt  label gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

label       display  inline-block      padding-right  10px    input type checkbox        position  relative      top  2px

User · Answer

Let s finally take a look at the source of the problem  The checkboxes are rendered using images  one may set custom ones via CSS   Here is an  unchecked  checkbox in FireFox  highlighted with DOM inspector     And here s the same unstyled checkbox in Chrome     You can see the margin  orange   padding is not present  would be shown green   So what s this pseudo-margin on the right and on the bottom of the checkbox  These are parts of the image used for the checkbox  That s why using just vertical-align  middle doesn t really suffice and that s the source of the cross-browser problems   So what can we do about this   One obvious option is     replace the images  Fortunately  one can do this via CSS and replace those with external images  base64  in-CSS  images  in-CSS svg or just pseudo-elements  It s a robust  cross-browser   approach  and here s an example of such adjustment stolen from this question    x000D   x000D   checkbox-custom   x000D    opacity  0  x000D    position  absolute  x000D    x000D   checkbox-custom  x000D   checkbox-custom-label   x000D    display  inline-block  x000D    vertical-align  middle  x000D    margin  5px  x000D    cursor  pointer  x000D    x000D   checkbox-custom    checkbox-custom-label before   x000D    content      x000D    display  inline-block  x000D    background   fff  x000D    border-radius  5px  x000D    border  2px solid  ddd  x000D    vertical-align  middle  x000D    width  10px  x000D    height  10px  x000D    padding  2px  x000D    margin-right  10px  x000D    text-align  center  x000D    x000D   checkbox-custom checked    checkbox-custom-label before   x000D    width  1px  x000D    height  5px  x000D    border  solid blue  x000D    border-width  0 3px 3px 0  x000D    transform  rotate 45deg   x000D    -webkit-transform  rotate 45deg   x000D    -ms-transform  rotate 45deg   x000D    border-radius  0px  x000D    margin  0px 15px 5px 5px  x000D    x000D   lt div gt  x000D     lt input id  checkbox-1  class  checkbox-custom  name  checkbox-1  type  checkbox  gt  x000D     lt label for  checkbox-1  class  checkbox-custom-label  gt First Choice lt  label gt  x000D   lt  div gt  x000D   lt div gt  x000D     lt input id  checkbox-2  class  checkbox-custom  name  checkbox-2  type  checkbox  gt  x000D     lt label for  checkbox-2  class  checkbox-custom-label  gt Second Choice lt  label gt  x000D   lt  div gt  x000D   x000D   x000D    You may want to read some more in-depth articles about such styling like some listed here  it s out of scope of this answer   Ok  still what about no-custom-images-or-pseudo-elements solution   TL DR  looks like this won t work  use custom checkbox instead  First  let s notice that if in other browsers those pseudo-margins inside checkbox icon were arbitrary  there were no consistent solution  To build one  we have to explore the anatomy of such images in existing browsers   So what browsers do have the pseudo-margins in checkboxes  I ve checked out Chrome 75  Vivaldi 2 5  Chromium-based   FireFox 54  don t ask why such outdated   IE 11  Edge 42  Safari     borrowed one for a minute  forgot to check out the version   Only Chrome and Vivaldi has such pseudo-margins  I suspect all Chromium-based browsers as well  like Opera    What s the size of those pseudo-margins  To figure this out one can use a zoomed checkbox    x000D   x000D  input   x000D    zoom  10  x000D    box-shadow  0 0 1px inset  999  x000D    x000D   lt input type checkbox gt  x000D   x000D   x000D    my result is  7  of width height and hence 0 9-1 0px in absolute units  The accuracy may be questioned  though  try different values of zoom for the checkbox  In my tests in both Chrome and Vivaldi the relative size of the pseudo-margin is very different at zoom values 10  20 and at values 11-19           scale seems to be more consistent    x000D   x000D  input   x000D    transform  scale 10  translate 50   50    x000D    box-shadow  0 0 1px inset  999  x000D    x000D   lt input type checkbox gt  x000D   x000D   x000D    so probably  14  and 2px are the correct values   Now that we know     the size of the pseudo-margin  let s note this is not enough  Are the sizes of the checkbox icons the same for all browsers  Alas  Here s what DOM inspector shows for unstyled checkboxes    FireFox  13 3px Chromium-based  12 8px for the whole thing  hence 12 8  100  - 14     11px for what is visually perceived as checkbox IE 11  Edge  13px Safari  n a  these should be compared on the same screen  I believe    Now before we discuss any solutions or tricks  let s ask  what is a correct alignment  What are we trying to achieve  To certain point it s a matter of taste  but basically I can think of the following  nice  alignments  aspects   text and checkbox on the same baseline  I deliberately don t adjust checkbox size here      or have same middle line in terms of lowercase letters     or same middle line in terms of capital letters  it s easier to see the difference for different font size      and also we have to decide whether the size of the checkbox should be equal to the height of a lowercase letter  a capital letter or something else  bigger  smaller or between lowercase and capital    For this discussion let s call an alignment nice if the checkbox is on the same baseline as the text and has the size of a capital letter  a highly arguable choice      Now what tools do we have to    adjust checkbox size recognize Chromium with its pseudo-margined checkbox and set specific styles adjust checkbox label vertical alignment       Regarding the checkbox size adjustment  there are width  height  size  zoom  scale  have I missed something    zoom and scale don t allow to set absolute size  so they may help only with adjusting to text size  not set cross-browser size  unless we can write browser-specific rules   size doesn t work with Chrome  did it work with old IE  anyway  it s not that interesting   width and height work in Chrome and other browsers  so we can set a common size  but again  in Chrome it sets the size of the whole image  not the checkbox itself  Note  it is minimum width  height  which defines a checkbox s size  if width   height  the area outside checkbox square is added to  pseudo-margin     An unfortunate thing is  the pseudo-margins in Chrome checkbox are not set to zero for any width and heights  as far as I can see  I m afraid there s no reliable CSS-only method these days  Let s consider vertical alignment  vertical-align can t give consistent results when set to middle or baseline because of the Chrome s pseudo-margin  the only real option to get the same  coordinate system  for all the browsers is to align label and input to the top      on the picture  vertical-align  top  bottom and bottom without box-shadow    So what result do we get from this    x000D   x000D  input type  checkbox     x000D      height  0 95em  x000D      width  0 95em  x000D    x000D  label  input   x000D      vertical-align  top  x000D    x000D   lt label gt  lt input type  checkbox  gt label lt  label gt  x000D   x000D   x000D    The snippet above works with Chrome  Chromium-based browsers   but other browsers require a smaller size of the checkbox  It seems to be impossible to adjust both the size and vertical alignment in a way that works around Chromium s checkbox image quirk  My final suggestion is  use custom checkboxes instead     and you ll avoid frustration

User · Answer

x000D   x000D   lt form gt  x000D       lt div gt  x000D           lt label style  display  inline-block  gt  x000D               lt input style  vertical-align  middle  type  checkbox    gt  x000D               lt span style  vertical-align  middle  gt Label text lt  span gt  x000D            lt  label gt  x000D       lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    The trick is to use vertical-align only in table cells or inline-block if using label tag

User · Answer

This is not the best way of going about solving the issue  vertical-align  middle     Adding style  position relative top 2px   to the input box would move it down 2px  So depending on your font size  you can move it along

User · Answer

label       display  inline-block      padding-right  10px    input type checkbox        position  relative      top  2px

User · Answer

I ve never had a problem with doing it like this    lt form gt     lt div gt       lt input type  checkbox  id  cb    gt   lt label for  cb  gt Label text lt  label gt     lt  div gt   lt  form gt

User · Answer

Hardcode the checkbox s height and width  remove its padding  and make its height plus vertical margins equal to the label s line-height  If the label text is inline  float the checkbox  Firefox  Chrome  and IE7  all render the following example identically  http   www kornea com css-checkbox-align

User · Answer

Try my solution  I tried it in IE 6  FF2 and Chrome and it renders pixel by pixel in all the three browsers    x000D   x000D      x000D    padding  0px  x000D    margin  0px  x000D    x000D   wb   x000D    width  15px  x000D    height  15px  x000D    float  left  x000D    x000D   somelabel   x000D    float  left  x000D    padding-left  3px  x000D    x000D   lt div gt  x000D     lt input id  wb  type  checkbox    gt  x000D     lt label for  wb  id  somelabel  gt Web Browser lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

try vertical-align  middle  also your code seems like it should be   x000D   x000D   lt form gt  x000D       lt div gt  x000D           lt input id  blah  type  checkbox  gt  lt label for  blah  gt Label text lt  label gt  x000D       lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

I found out one way to do it that gives the same result in almost all browsers. At the very least up-to-date browsers. It works in Firefox, Chrome, Safari, Opera. In IE it will just look almost as if there were no rules applied for inputs or labels (i.e., it'll still have the label a few pixels below the input), so I think it's excusable.

HTML

<label class="boxfix"><input type="radio">Label</label>

CSS

.boxfix {
    vertical-align: bottom;
}
.boxfix input {
    margin: 0;
    vertical-align: bottom;
    position: relative;
    top: 1.999px; /* the inputs are slightly more centered in IE at 1px (they don't interpret the .999 here), and Opera will round it to 2px with three decimals */
}

[html] How to align checkboxes and their labels consistently cross-browsers

Examples related to html

Examples related to css

Examples related to cross-browser

Examples related to alignment

Examples related to forms