我可以在HTML文本中调整复选框的垂直位置吗？

Question

我正在使用Bootstrap 4创建一个网站，至少在Windows 10上的Chrome中，复选框显示的位置有点过高：

这些<input type="checkbox">元素包含在<label>中。

我想将复选框本身向下移动3px左右。这有可能用CSS吗？

Answer 1

使用flexbox是一种选择。

.container {
  display: flex;
  align-items: center;
}

.row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

<div class="main">
  <div class="row">
    <div class="container">
      <label for="checkbox1">Checkbox 1</label>
      <input type="checkbox" name="checkbox1">
    </div>
    <div class="container">
      <label for="checkbox2">Checkbox 2</label>
      <input type="checkbox" name="checkbox2">
    </div>
    <div class="container">
      <label for="checkbox3">Checkbox 3</label>
      <input type="checkbox" name="checkbox3">
    </div>
    <div class="container">
      <label for="checkbox4">Checkbox 4</label>
      <input type="checkbox" name="checkbox4">
    </div>
  </div>
  <div class="row">
    <div class="container">
      <label for="checkbox5">Checkbox 5</label>
      <input type="checkbox" name="checkbox5">
    </div>
    <div class="container">
      <label for="checkbox6">Checkbox 6</label>
      <input type="checkbox" name="checkbox6">
    </div>
    <div class="container">
      <label for="checkbox7">Checkbox 7</label>
      <input type="checkbox" name="checkbox7">
    </div>
    <div class="container">
      <label for="checkbox8">Checkbox 8</label>
      <input type="checkbox" name="checkbox8">
    </div>
  </div>
</div>

Answer 2

尝试使用vertical-align: middle;

＆＃13;

＆＃13;

input[type="checkbox"] {
vertical-align: middle;
}

＆＃13;

<div class="test">
    text <input type="checkbox" name="">
</div>

＆＃13;

＆＃13;

＆＃13;