选中时称为复选框标签的样式

Question

我正在尝试为我正在研究的项目设计一些更大的引导元素,我似乎遇到了一个问题.

当我正在处理一个复选框时,我按照我需要的方式设置它,但它旁边的标签一直在移动.未选中时,它会与框的底部对齐,但是当选中它时会移动到中心,将其对齐到框中.

老实说我很困惑为什么这样做,这让我有点疯狂.我检查了所有填充,边距和对齐,但似乎没有任何帮助.

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

我在http://jsfiddle.net/zazvorniki/KGx4S/2/工作的小提琴的链接

任何帮助都是极好的!

Answer 1

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

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

这可能是因为<span>s是默认的内联元素,所以如果你在<span>任何需要垂直对齐的地方使用,vertical-align只能使用inline/inline-block元素.

换句话说,以下代码无效:

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

为什么？

因为a <div>是块级元素,而不是内联元素.当然,如果将其转换<div>为内联或内联块元素,则vertical-align属性将起作用.

演示