How to center a checkbox in a table cell

Question

The cell contains nothing but a checkbox  It is rather wide because of text in the table header row  How do I center the checkbox  with inline CSS in my HTML   I know    I tried      lt td gt         lt input type  checkbox  name  myTextEditBox  value  checked         style  margin-left auto  margin-right auto   gt    lt  td gt    but that didn t work   What am I doing wrong       Update  here s a test page  Can someone please correct it - with CSS inline in the HTML - so that the checkboxes are centered in their columns       lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 0 Transitional  EN  gt   lt html gt   lt head gt   lt title gt Alignment test lt  title gt   lt  head gt   lt body gt    lt table style  empty-cells hide  margin-left auto  margin-right auto   border  1    cellpadding  1  cellspacing  1  gt      lt tr gt       lt th gt Search  lt  th gt  lt th gt Field lt  th gt  lt th colspan  2  gt Search criteria lt  th gt  lt th gt Include in report  lt br gt  lt  th gt     lt  tr gt      lt tr gt       lt td gt           lt input type  checkbox  name  query myTextEditBox  style  text-align center  vertical-align  middle   gt           lt  td gt        lt td gt        myTextEditBox      lt  td gt        lt td gt          lt select size   1  name  myTextEditBox compare operator  gt           lt option value     gt equals lt  option gt           lt option value   lt  gt   gt does not equal lt  option gt          lt  select gt       lt  td gt        lt td gt         lt input type  text  name  myTextEditBox compare value  gt       lt  td gt        lt td gt         lt input type  checkbox  name  report myTextEditBox  value  checked  style  text-align center  vertical-align  middle   gt       lt  td gt      lt  tr gt    lt  table gt     lt  body gt   lt  html gt      I have accepted  Hristo s answer - and here it is with inline formatting         lt table style  empty-cells hide   border  1    cellpadding  1  cellspacing  1  gt        lt tr gt           lt th gt Search  lt  th gt  lt th gt Field lt  th gt  lt th colspan  2  gt Search criteria lt  th gt  lt th gt Include in report  lt br gt  lt  th gt       lt  tr gt        lt tr gt           lt td style  text-align  center  vertical-align  middle   gt               lt input type  checkbox  name  query myTextEditBox  gt               lt  td gt            lt td gt              myTextEditBox          lt  td gt            lt td gt               lt select size   1  name  myTextEditBox compare operator  gt                   lt option value     gt equals lt  option gt                   lt option value   lt  gt   gt does not equal lt  option gt               lt  select gt           lt  td gt            lt td gt               lt input type  text  name  myTextEditBox compare value  gt           lt  td gt            lt td style  text-align  center  vertical-align  middle   gt               lt input type  checkbox  name  report myTextEditBox  value  checked  gt           lt  td gt        lt  tr gt    lt  table gt

User · Answer

Try this  this should work   td input type  checkbox         float  left      margin  0 auto      width  100

User · Answer

Make sure that your  lt td gt  is not display  block   Floating will do this  but much easier to just  display  inline

User · Answer

Define the float property of the check element to none   float  none    And center the parent element   text-align  center    It was the only that works for me

User · Answer

How about this    http   jsfiddle net gSaPb   Check out my example on jsFiddle  http   jsfiddle net QzPGu  Code snippet   x000D   x000D  td     text-align  center       center checkbox horizontally      vertical-align  middle       center checkbox vertically       table     border  1px solid    width  200px     tr     height  80px    x000D   lt table gt     lt tr gt       lt td gt         lt input type  checkbox  name  myTextEditBox  value  checked    gt  checkbox      lt  td gt     lt  tr gt   lt  table gt  x000D   x000D   x000D

User · Answer

For dynamic writing td elements and not rely directly on the td Style     lt td gt        lt div style  text-align  center   gt            lt input  type  checkbox  gt        lt  div gt     lt  td gt

User · Answer

Pull out ALL of your in-line CSS  and move it to the head  Then use classes on the cells so you can adjust everything as you like  don t use a name like  center  - you may change it to left 6 months from now      The alignment answer is still the same - apply it to the  lt td gt  NOT the checkbox  that would just center your check  -     Using you code      lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 0 Transitional  EN  gt   lt html gt   lt head gt   lt title gt Alignment test lt  title gt   lt style gt  table   margin 10px auto  border-collapse collapse  border 1px solid gray    td th   border 1px solid gray  text-align left  padding 20px    td opt1   text-align center  vertical-align middle    td opt2   text-align right     lt  style gt   lt  head gt   lt body gt    lt table gt          lt tr gt           lt th gt Search  lt  th gt  lt th gt Field lt  th gt  lt th colspan  2  gt Search criteria lt  th gt  lt th gt Include in report  lt br gt  lt  th gt         lt  tr gt         lt tr gt           lt td class  opt1  gt  lt input type  checkbox  name  query myTextEditBox  gt  lt  td gt           lt td gt            myTextEditBox          lt  td gt           lt td gt              lt select size   1  name  myTextEditBox compare operator  gt               lt option value     gt equals lt  option gt               lt option value   lt  gt   gt does not equal lt  option gt              lt  select gt           lt  td gt           lt td gt  lt input type  text  name  myTextEditBox compare value  gt  lt  td gt           lt td class  opt2  gt             lt input type  checkbox  name  report myTextEditBox  value  checked  gt           lt  td gt         lt  tr gt       lt  table gt       lt  body gt       lt  html gt

User · Answer

My problem was that there was a parent style with position  absolute  important which I was not allowed to edit  So I gave my specific checkbox position  relative  important and it fixed the vertical misalignment issue

User · Answer

This should work  I am using it    lt td align  center  gt   lt input type  checkbox  name  myTextEditBox  value  checked   gt  lt  td gt

User · Answer

Try   lt td style  text-align center   gt     lt input type  checkbox  name  myTextEditBox  value  checked    gt   lt  td gt

User · Answer

x000D   x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 4 1 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt table class  table table-bordered  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt  lt  th gt  x000D         lt th class  text-center  gt Left lt  th gt  x000D         lt th class  text-center  gt Center lt  th gt  x000D         lt th class  text-center  gt Right lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt th gt  x000D           lt span gt Bootstrap  class  text-left   lt  span gt  x000D         lt  th gt  x000D         lt td class  text-left  gt  x000D           lt input type  checkbox    gt  x000D         lt  td gt  x000D         lt td class  text-center  gt  x000D           lt input type  checkbox  checked   gt  x000D         lt  td gt  x000D         lt td class  text-right  gt  x000D           lt input type  checkbox    gt  x000D         lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt th gt  x000D           lt span gt HTML attribute  align  left   lt  span gt  x000D         lt  th gt  x000D         lt td align  left  gt  x000D           lt input type  checkbox    gt  x000D         lt  td gt  x000D         lt td align  center  gt  x000D           lt input type  checkbox  checked   gt  x000D         lt  td gt  x000D         lt td align  right  gt  x000D           lt input type  checkbox    gt  x000D         lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

If you don t support legacy browsers  I d use flexbox because it s well supported and will simply solve most of your layout problems    table-id td nth-child 1            nth-child 1  is the first column  change to fit your needs        display  flex      justify-content  center      This centers all content in the first  lt td gt  of every row

[html] How to center a checkbox in a table cell?

Examples related to html

Examples related to css