html - 样式的复选框标签在选中时移动

我正在尝试为正在处理的元素设置一些较大的bootstrap元素样式，但似乎遇到了一个问题。

当我处理一个复选框时，我已按照所需的方式对其进行了样式设置，但其旁边的标签一直在移动。取消选中时，它会与盒子的底部对齐，但是选中时，它会移到居中位置，使其与盒子对齐。

老实说，我很困惑为什么要这么做，这让我有点发疯。我已经检查了所有的填充，边距和对齐方式，但似乎无济于事。

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

CSS看起来像这样

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

我正在工作的 fiddle 的链接
http://jsfiddle.net/zazvorniki/KGx4S/2/

任何帮助都是极好的!

最佳答案

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

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

这可能是因为<span>是默认的嵌入式元素，因此，如果您在使用<span>，则需要垂直对齐的任何地方，因为vertical-align仅适用于inline/inline-block元素。

换句话说，以下代码将无效:

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

为什么？

因为<div>是块级元素，所以不是内联的。当然，如果将<div>转换为行内元素或行内块元素，则vertical-align属性将起作用。

Demo

关于html - 样式的复选框标签在选中时移动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23743072/