title: How to use CSS to align a custom check box with its label?
body: <p>I have added some custom, larger, check boxes to my page but the labels do not align vertically with check boxes.  None of the solutions I've found using Google works.  I'm looking for an HTML/CSS solution and I'm a web page novice.</p>
  
  <p>What am I missing?</p>
  
  <p>EDIT: I did indeed attempt to use the solution and other proposed solutions in the popular post <a href="https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers/" title="another question">another question</a> but the solutions are for a simple checkbox and I'm using a custom checkbox.  I've spent a couple hours attempting to fold that and other solutions on that post and other posts into my HTML and CSS but the checkbox and the label remain in lockstep with the label aligned to the the top of the checkbox.  My code is demonstrably more complex than the examples and I do not understand how to incorporate any of the suggested solutions. </p>
  
  <p>An HTML snippet: </p>
  
  <pre><code> &lt;div class="checkbox"&gt;
     &lt;input id="check1" type="checkbox" name="check" class=misc-chk-btn value="check1"&gt;
     &lt;label for="check1"&gt;/dev/media/usb0&amp;nbsp;BACKUP1&lt;/label&gt;
     &lt;input id="check2" type="checkbox" name="check" class=misc-chk-btn value="check2"&gt;
     &lt;label for="check2"&gt;/dev/media/usb0&amp;nbsp;no&amp;nbsp;label&lt;/label&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>input[type=checkbox] { display: none;}
  
  .checkbox label {
      display: inline-block;
      cursor: pointer;
      position: relative;
      padding-left: 30px;
      margin-right: 15px;
      font-size: 1.1em;
  
  }
  
  .checkbox label:before {
      content: "";
      display: inline-block;
  
     /* size the check boxes */
      width: 24px; 
      height: 24px;
  
      border-radius: 6px; 
      margin-right: 10px;
      position: absolute;
      top: 4px;
      left: 4px;
      bottom: 1px;
      background-color: #afa;
      box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
  }
  
  input[type=checkbox]:checked + label:before {
      content: "\2713";  /* check char */
      text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
      font-size: 1.1em;
      color: black;
      text-align: center;
      line-height: 24px;
  }
  </code></pre>