Vertically aligning a checkbox

Question

I have looked at the different questions regarding this issue  but couldn t find anything that works due to limitations in my markup   My markup looks like so  unfortunately as this is generated by some backend  I am unable to change the markup     lt ul gt               lt li gt           lt input type  checkbox  value  1  name  test    id  myid1  gt           lt label for  myid1  gt label1 lt  label gt       lt  li gt       lt li gt           lt input type  checkbox  value  2  name  test    id  myid2  gt           lt label for  myid2  gt label1 lt  label gt       lt  li gt   lt  ul gt    I need the checkbox to be on the right and centered vertically in the  lt li gt   Currently  this is styled as   li input     display  inline-block     float  right     margin-right  10px      I have tried using various values for vertical-align  but that doesn t seem to help  Also  in some cases the label can be very long and span multiple lines  The checkbox would still need to be able to vertically center itself when the height of the li is arbitrary   How can I go about achieving this

User · Answer

The most effective solution that I found is to define the parent element with display:flex and align-items:center

LIVE DEMO

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .myclass{
        display:flex;
        align-items:center;
        background-color:grey;
        color:#fff;
        height:50px;
      }
    </style>
  </head>
  <body>
    <div class="myclass">
      <input type="checkbox">
      <label>do you love Ananas?
      </label>
    </div>
  </body>
</html>

OUTPUT:

User · Answer

make input to block and float  Adjust margin top value   HTML    lt div class  label  gt   lt input type  checkbox  name  test    gt  luke    lt  div gt    CSS      change margin-top  if your line-height is different     input type checkbox   height 18px  width 18px  padding 0  margin-top 5px  display block  float left     label  border 1px solid red      Demo

User · Answer

Its not a perfect solution  but a good workaround  You need to assign your elements to behave as table with display  table-cell Solution  Demo HTML   lt ul gt               lt li gt           lt div gt  lt input type  quot checkbox quot  value  quot 1 quot  name  quot test   quot  id  quot myid1 quot  gt  lt  div gt           lt div gt  lt label for  quot myid1 quot  gt label1 lt  label gt  lt  div gt       lt  li gt       lt li gt           lt div gt  lt input type  quot checkbox quot  value  quot 2 quot  name  quot test   quot  id  quot myid2 quot  gt  lt  div gt           lt div gt  lt label for  quot myid2 quot  gt label2 lt  label gt  lt  div gt       lt  li gt   lt  ul gt   CSS  li div   display  table-cell  vertical-align  middle

User · Answer

This works reliably for me   Cell borders and height added for effect and clarity    x000D   x000D   lt table gt  x000D     lt tr gt  x000D       lt td style  text-align right  border  thin solid  height 50px  gt Some label  lt  td gt  x000D       lt td style  border  thin solid   gt  x000D         lt input type  checkbox  checked  checked  id  chk1  style  cursor pointer    gt  lt label for  chk1  style  margin-top auto  margin-left 5px  margin-bottom auto  cursor pointer   gt Check Me lt  label gt  x000D       lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Vertical alignment only works on inline elements  If you float it  then I don t think it is treated as part of that stream of inline elements any more   Make the label an inline-block  and use vertical alignment on both the label and the input to align their middles  Then  assuming it is okay to have a specific width on the labels and checkboxes  use relative positioning instead of floating to swap them  jsFiddle demo    input       width  20px       position  relative      left  200px       vertical-align  middle     label         width  200px       position  relative      left  -20px       display  inline-block      vertical-align  middle

User · Answer

x000D   x000D  Add CSS  x000D   x000D   x000D  li   x000D    display  table-row  x000D    x000D     x000D  li div   x000D     display  table-cell  x000D     vertical-align  middle  x000D   x000D      x000D   check  x000D    width 20px  x000D   x000D      x000D  ul  x000D     list-style  none  x000D      x000D     x000D    lt ul gt  x000D          lt li gt  x000D   x000D              lt div gt  lt label for  myid1  gt Subject1 lt  label gt  lt  div gt  x000D               lt div class  check  gt  lt input type  checkbox  value  1 name  subject  class  subject-list  id  myid1  gt  lt  div gt  x000D          lt  li gt  x000D          lt li gt  x000D   x000D              lt div gt  lt label for  myid2  gt Subject2 lt  label gt  lt  div gt  x000D                 lt div class  check   gt  lt input type  checkbox  value  2   class  subject-list  name  subjct  id  myid2  gt  lt  div gt  x000D          lt  li gt  x000D      lt  ul gt  x000D   x000D   x000D

User · Answer

lt div gt       lt input type  checkbox  gt       lt img src   image png    gt   lt  div gt    input type  checkbox         margin-top  -50       vertical-align  middle

[css] Vertically aligning a checkbox

Examples related to css

Examples related to checkbox

Examples related to vertical-alignment