title: Vertically center a checkbox within a div
body: <p>I have a <code>checkbox</code> within a <code>div</code> that is appearing higher than the text I want it to be aligned with.</p>
  
  <p>Here's how it appears in Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/yeI1I.png" alt="enter image description here"></p>
  
  <p>As you can see, the <code>checkbox</code> is just a few pixels higher than the text. I have tried applying various padding / margins, including negative values, but to no avail.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="read-confirm-box"&gt;
    I Have read the above 
    &lt;input type="checkbox" id="checkbox" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#read-confirm-box
  {
      color: #FFF;
      width: 180px;
      font-size: 12px;
      background-color: #333;
      border-radius: 3px;
      padding: 6px 11px;
      margin: auto;
      float: left;
  }
  
  #checkbox 
  {
      /* Empty */
  }
  </code></pre>