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>是内联元素，因此，如果您在<span>处需要垂直对齐的任何地方使用vertical-align，则只能使用inline/inline-block {1}}元素。

换句话说，以下代码无效：

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

为什么？

因为<div>是块级元素，而不是内联。当然，如果将<div>转换为内联或内联块元素，则vertical-align属性会产生影响。

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

1 个答案:

Demo