html复选框显示在h2标签下方

Question

我在同一个div中有一个HTML复选框，其中有一个h2

h2.childcares {
  font-family: Source Sans;
  color: black;
  background-color: #ff9f01;
  display: inline;
  padding: 5px;
  border: 1px solid blue;
  border-radius: 15px;
}

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="childcares" unchecked>
  <label class="custom-control-label" for="childcares"></label>
  <h2 class="childcares">Childcares</h2>
</div>

这是显示

我希望复选框以h2标签居中

Answer 1

我想给所有孩子一个vertical-align: middle风格：

h2.childcares { 
    font-family: Source Sans;
    color: black;
    background-color: #ff9f01;
    display: inline;
    padding: 5px;
    border: 1px solid blue;
    border-radius: 15px; 
}

.custom-control-label, 
.custom-control-input,
.childcares {
    vertical-align: middle;
}

<div class="custom-control custom-checkbox">
   <input type="checkbox" class="custom-control-input" id="childcares" unchecked>
   <label class="custom-control-label" for="childcares"></label>
   <h2 class="childcares">Childcares</h2>
</div>

Answer 2

您的代码正确对齐了中间的复选框，可能会为您带来缓存问题。如果希望将其设置在中间，则可以在CSS中添加此单个属性，并且复选框对齐方式将被锁定。

h2.childcares {
    vertical-align: baseline;
  }

请点击以下链接，此链接会更清楚地说明 checkbox property alignment