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).

<ul>        
    <li>
        <input type="checkbox" value="1" name="test[]" id="myid1">
        <label for="myid1">label1</label>
    </li>
    <li>
        <input type="checkbox" value="2" name="test[]" id="myid2">
        <label for="myid2">label1</label>
    </li>
</ul>

I need the checkbox to be on the right and centered vertically in the <li>

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?

Would prefer not to :) Forgot to mention that the markup is generated by a backend, so I can't really use tables in my markup. — F21, Mar 22 '12 at 01:42

score 75 · Accepted Answer · edited Mar 21 '19 at 12:52

75

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;
}

edited Mar 21 '19 at 12:52

YakovL

7,557
12
62
102

answered Mar 22 '12 at 02:16

Supr

18,572
3
31
36

2

Thanks so much, for me the key point was "use vertical alignment on both the label and the input", I was using it only on the input.. Thanks again! – Thierry J. May 22 '14 at 01:27
The key to this is that the label width forces the wrapping. If the ul width forces the wrapping. Having a width on the label is mandatory. – boatcoder Dec 29 '14 at 13:29

score 13 · Answer 2 · edited Jun 20 '20 at 09:12

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:

<ul>        
    <li>
        <div><input type="checkbox" value="1" name="test[]" id="myid1"></div>
        <div><label for="myid1">label1</label></div>
    </li>
    <li>
        <div><input type="checkbox" value="2" name="test[]" id="myid2"></div>
        <div><label for="myid2">label2</label></div>
    </li>
</ul>

CSS:

li div { display: table-cell; vertical-align: middle; }

Jonathan Applebaum · Answer 3 · 2019-05-27T19:40:40.257

4

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:

edited May 27 '19 at 19:40

answered May 27 '19 at 19:33

Jonathan Applebaum

5,738
4
33
52

did we use the height of parent? – always-a-learner Aug 05 '22 at 13:11

score 0 · Answer 4 · edited May 29 '17 at 01:23

0

<div>
    <input type="checkbox">
    <img src="/image.png" />
</div>

input[type="checkbox"]
{
    margin-top: -50%;
    vertical-align: middle;
}

edited May 29 '17 at 01:23

Paul Roub

36,322
27
84
93

answered May 28 '17 at 23:52

Timothy Gonzalez

1,802
21
18

score 0 · Answer 5 · edited Mar 21 '19 at 12:48

0

This works reliably for me. Cell borders and height added for effect and clarity:

<table>
  <tr>
    <td style="text-align:right; border: thin solid; height:50px">Some label:</td>
    <td style="border: thin solid;">
      <input type="checkbox" checked="checked" id="chk1" style="cursor:pointer; "><label for="chk1" style="margin-top:auto; margin-left:5px; margin-bottom:auto; cursor:pointer;">Check Me</label>
    </td>
  </tr>
</table>

edited Mar 21 '19 at 12:48

YakovL

7,557
12
62
102

answered Nov 04 '18 at 21:06

retiredcoder

71
1
3

I'd recommend to separate inline CSS, otherwise the answer is difficult to follow – YakovL Mar 21 '19 at 12:49

Seth · Answer 6 · 2019-07-27T14:02:34.827

Add CSS:


li {
  display: table-row;
 
 }
li div {
   display: table-cell;
   vertical-align: middle;

  }
.check{
  width:20px;

  }
ul{
   list-style: none;
  }

 <ul>
       <li>

           <div><label for="myid1">Subject1</label></div>
            <div class="check"><input type="checkbox" value="1"name="subject" class="subject-list" id="myid1"></div>
       </li>
       <li>

           <div><label for="myid2">Subject2</label></div>
              <div class="check" ><input type="checkbox" value="2"  class="subject-list" name="subjct" id="myid2"></div>
       </li>
   </ul>

score -2 · Answer 7 · answered Jun 16 '14 at 17:46

make input to block and float, Adjust margin top value.

HTML:

<div class="label">
<input type="checkbox" name="test" /> luke..
</div>

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

Vertically aligning a checkbox

7 Answers7

Solution: ^Demo

Linked

Related

Vertically aligning a checkbox

7 Answers7

Solution: Demo

Linked

Related

Solution: ^Demo