styled checkbox label moving when checked

Question

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.

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.

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.

my html looks like this

<div role="form" class="form_control">
    <div class="form-group">
        <label class="btn">
          <input type="checkbox"  />
           <span>name</span>
       </label>&nbsp;
        <span></span>
     </div>
</div>

and the css looks like this

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

a link to the fiddle I'm working in http://jsfiddle.net/zazvorniki/KGx4S/2/

Any help would be awesome!

Answer 1

You can set it aligned by following code:

.btn btn-primary span, input[type='checkbox']{
   vertical-align:middle;
}

This is probably happening because <span>s are by default inline elements, so if you're using <span> anywhere that need to be vertically aligned as vertical-align only works with inline/inline-block elements.

In other words, the following code would have no effect:

div {  
    vertical-align: middle; /* this won't do anything */  
} 

Why?

Because a <div> is a block-level element, not inline. Of course, if you converted the <div> to an inline or inline-block element, then the vertical-align property would have an effect.

Demo