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

Question

我正在用 Bootstrap 4 创建一个网站，至少在 Chrome 和 Windows 10 中，复选框在一行中显示的有点太高了：

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

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

Answer 1

尝试使用 vertical-align: middle;

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

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

Answer 2

使用 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>

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

Can I adjust the vertical position of checkboxes in HTML text?

html

css

checkbox

baseline

bootstrap-4