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

【问题标题】：Can I adjust the vertical position of checkboxes in HTML text?我可以调整 HTML 文本中复选框的垂直位置吗？
【发布时间】：2017-12-19 06:01:09
【问题描述】：

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

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

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

【问题讨论】：

标签： html css checkbox bootstrap-4 baseline

【解决方案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>

【讨论】：

我需要在一行中有多个复选框，如果我不想手动将所有复选框分配给divs，这对于弹性框来说似乎很难做到。
我已经调整了代码来演示一行中的多个复选框。不太复杂。

【解决方案2】：

尝试使用vertical-align: middle;

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

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

【讨论】：

很好，实际上-2px 是所有浏览器中最漂亮的选项。谢谢