html - 垂直对齐复选框旁边的文本

Question

我试图放置一个复选框，旁边有一些文本来解释该复选框的作用。我想让他们的位置 absolute 因为他们的包装 div 里面还有其他东西。

虽然我将它们的 top 设置为相同的值，但复选框似乎比文本高。

我做了一个 jsfiddle 来解释我的意思:https://jsfiddle.net/9jx5t4xL/ .

我应该将复选框的 top 设置得比文本大一点，还是有更好的垂直对齐方式？

Answer 1

使用 position 和 % values 不是一个好的选择，你可以使用很棒的 flexbox 布局来轻松实现它:

代码片段:

#wrapper {
  height: 200px;
  width: 250px;
  border: 1px solid red;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 24em;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
label {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
}
input {
  margin: 0;
  vertical-align: middle;
}

<div id="wrapper">
  <label>Caption for input
    <input type="checkbox" />
  </label>
</div>