复选框输入元素不垂直对齐答案

【问题标题】：checkbox input element doesn't vertically align复选框输入元素不垂直对齐
【发布时间】：2014-10-25 19:42:51
【问题描述】：

我正在创建一个带有文本、单选框和复选框输入以及标签的表单。

fieldset {
  margin-top: 1em;
  margin-bottom: 1em;
  padding-top: .5em;
}

legend {
  color: #61f231;
  font-size: 85%;
}

label {
  float: left;
  width: 20em;
  text-align: right;
  font-size: 85%;
  font-weight: bold;
  border: 1px solid black;
  margin-bottom: 2em;
  padding: 1em .5em;
  font-family: Arial, Helvetica, sans-serif;
}

label.left_label {
  float: none;
  margin: 0px;
  padding: 0px;
}

input {
  width: 20em;
  margin-left: .5em;
  margin-bottom: 2em;
  padding: 1em .5em;
  border: 1px solid black;
  font-size: 85%;
  font-family: Arial, Helvetica, sans-serif;
}

input[type="radio"], input[type="checkbox"] {
  width: auto;
  padding: 1em .5em;
  margin-left: .5em;
  margin-bottom: 2em;
  font-size: 85%;
  font-family: Arial, Helvetica, sans-serif;

}

br {
  clear: both;
}

input:focus {
  box-shadow: 0px 0px 4px 3px #61f231;
}

<label for="email">E-mail</label>
<input type="email" name="email" id="email" autofocus required><br>
<label for="password">Password</label>
<input type="password" name="password" id="password" required><br>
<label for="verify">Re-Type Password</label>
<input type="password" name="verify" id="verify" required><br>
<label>&nbsp;</label>
<input type="checkbox" name="hello1" id="hello_1"
       value="hello1"
       title="blah blah">
<label class="left_label" for="hello_1">hello 1</label>

如您所见，最后一个输入元素是一个复选框，其格式稍有不同。我希望它与上面的文本输入对齐。因此，我在“验证”输入之后放置了一个空标签作为第一个元素。

但是，由于某种原因，复选框元素没有在中间垂直对齐（这是我想要的结果）（它在顶部对齐）。

另外，如果我放置一个文本输入而不是空标签元素，那么复选框会在中间垂直对齐。

谁能解释一下这个问题的原因以及我该如何解决？

【问题讨论】：

标签： html css checkbox vertical-alignment

【解决方案1】：

将此类添加到复选框

.middle
{
vertical-align: middle;
}

【讨论】：

【解决方案2】：

这是你期待的吗？

fieldset {
  margin-top: 1em;
  margin-bottom: 1em;
  padding-top: .5em;
}

legend {
  color: #61f231;
  font-size: 85%;
}

label {
  float: left;
  width: 20em;
  text-align: right;
  font-size: 85%;
  font-weight: bold;
  border: 1px solid black;
  margin-bottom: 2em;
  padding: 1em .5em;
  font-family: Arial, Helvetica, sans-serif;
}

label.left_label {
  float: none;
  margin-top: 0px;
  padding: 0px;
  vertical-align: middle;
}

input {
  width: 20em;
  margin-left: .5em;
  margin-bottom: 2em;
  padding: 1em .5em;
  border: 1px solid black;
  font-size: 85%;
  font-family: Arial, Helvetica, sans-serif;
  vertical-align: middle;
}

input[type="radio"], input[type="checkbox"] {
  width: auto;
  padding: 1em .5em;
  margin-left: .5em;
  margin-bottom: 1.5em;
  font-size: 85%;
  font-family: Arial, Helvetica, sans-serif;

}

br {
  clear: both;
}

input:focus {
  box-shadow: 0px 0px 4px 3px #61f231;
}
.middle{
  margin-top: 1.2em;
  }

<label for="email">E-mail</label>
<input type="email" name="email" id="email" autofocus required><br>
<label for="password">Password</label>
<input type="password" name="password" id="password" required><br>
<label for="verify">Re-Type Password</label>
<input type="password" name="verify" id="verify" required><br>
<label>&nbsp;</label>
<input type="checkbox" name="hello1" class="middle" id="hello_1"
       value="hello1"
       title="blah blah">
<label class="left_label" for="hello_1">hello 1</label>

【讨论】：