Question

我正在尝试在其旁边放置一个带有一些文字的复选框来解释复选框的功能。我想把它们的位置都设为absolute，因为它们的包装div里面还有其他内容。

虽然我将两个top放在同一个值中，但复选框似乎比文本更高。

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

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

Answer 1

使用position和％值将不是一个好的选择，而不是你可以使用真棒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>

Answer 2

改变你的css

#wrapper {
  height: 200px;
  width: 250px;
  border: 1px solid red;
  position: relative;
}

p{
  position: absolute;
  top: 40%;
  display: inline-block;
  left: 5%;
}

input{
  position: absolute;
  top: 50%;
  display: inline-block;
  left: 70%;
}

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

DECLARE @table table (id int)

INSERT INTO MASTER_CAL
OUTPUT inserted.id into @table
VALUES('XYZ')

SELECT id from @table

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

2 个答案:

代码段：