Html 选中时已设置样式的复选框标签移动

我正在尝试为我正在进行的项目设计一些更大的引导元素，我似乎遇到了一个问题

当我处理一个复选框时，我已经按照我需要的方式对它进行了样式设置，但是它旁边的标签一直在移动。未选中时，它将自身与框的底部对齐，但选中时，它将移动到中心并与框对齐

我真的很困惑它为什么要这么做，这让我有点发疯。我检查了所有的填充、边距和对齐方式，但似乎没有任何帮助

我的html看起来像这样

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

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

指向我工作的小提琴的链接

---

任何帮助都会很棒

您可以通过以下代码将其设置为对齐：

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

这可能是因为默认情况下，

s是内联元素，因此如果您在任何需要垂直对齐的位置使用

，因为

垂直对齐

仅适用于

内联/内联块

元素

换言之，以下代码将无效：

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

为什么?

因为

是块级元素，而不是内联元素。当然，如果将

转换为内联或内联块元素，则垂直对齐属性将产生效果

---

+1，得出了完全相同的结论。但是我真的不明白为什么跨度会“跳”起来。非常感谢！我还在想为什么它也在跳。这很奇怪。@davidkonrad更新了答案；）@扎兹沃尼基更新了我的答案！