title: styled checkbox label moving when checked
body: <p>I'm trying to style some larger bootstrap elements for a project I'm working on and I seem to have come across an issue.</p>
  
  <p>When I'm working on a checkbox, I have it styled the way I need it to be, but the label beside it keeps moving. When unchecked it aligns itself with the bottom of the box, but then when checked it moves to center align it to the box.</p>
  
  <p>I am honestly puzzled why it is doing this and it is driving me a bit nutty. I have checked all the padding, margin and alignment, but nothing seems to help.</p>
  
  <p>my html looks like this</p>
  
  <pre><code>&lt;div role="form" class="form_control"&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="btn"&gt;
            &lt;input type="checkbox"  /&gt;
             &lt;span&gt;name&lt;/span&gt;
         &lt;/label&gt;&amp;nbsp;
          &lt;span&gt;&lt;/span&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css looks like this</p>
  
  <pre><code>.btn input[type='checkbox'] {
    -webkit-appearance: none;
    background: #dee1e2;
    width: 1.3em;
    height: 1.3em;
    border-radius: 3px;
    border: 1px solid #555;
      padding: 0 0 0 .3em;
      font-size:2em;
  }
  /* added content with a unicode check */
  .btn input[type='checkbox']:checked:before {
    content: "\2713";
    width: 1.3em;
    height: 1.3em;
  }
  </code></pre>
  
  <p>a link to the fiddle I'm working in 
  <a href="http://jsfiddle.net/zazvorniki/KGx4S/2/" rel="noreferrer">http://jsfiddle.net/zazvorniki/KGx4S/2/</a></p>
  
  <p>Any help would be awesome!</p>