html - 对齐标签和自定义复选框

Question

如何对齐标签和自定义复选框？代码片段如下。我想确保标签和开关垂直对齐，我还应该能够使用标签中的任何文本。我不能使用 position:absolute 方法来对齐标签，因为文本可能会更改并且我不希望有任何重叠。

.switch {
  position: relative;
  display: inline-block;
}

.switch input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
  height: 25px;
  width: 50px;
  border-radius: 25px;
  background-color: #999;
}

.switch input[type="checkbox"]:checked {
  background-color: green;
}

.switch input[type="checkbox"]:after {
  position: absolute;
  content: ' ';
  height: 16.66667px;
  width: 16.66667px;
  top: 6.5px;
  right: 33px;
  border-radius: 11.11111px;
  background: #fff;
}

.switch input[type="checkbox"]:checked::after {
  right: 6px;
}

<div class="switch">
  <label for="checkbox1">Test Test Test Test</label>
  <input type="checkbox" id="checkbox1">
</div>

Answer 1

您应该能够在输入上使用垂直对齐属性(例如:vertical-align: middle;):

.switch {
  position: relative;
  display: inline-block;
}
.switch input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
  height: 25px;
  width: 50px;
  border-radius: 25px;
  background-color: #999;
  vertical-align: middle;
}
.switch input[type="checkbox"]:checked {
  background-color: green;
}
.switch input[type="checkbox"]:after {
  position: absolute;
  content: ' ';
  height: 16.66667px;
  width: 16.66667px;
  top: 6.5px;
  right: 33px;
  border-radius: 11.11111px;
  background: #fff;
}
.switch input[type="checkbox"]:checked::after {
  right: 6px;
}

<div class="switch">
  <label for="checkbox1">Test Test Test Test</label>
  <input type="checkbox" id="checkbox1">
</div>