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

Question

我正在创建一个包含文本，广播和复选框输入以及标签的表单。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，最后一个输入元素是一个复选框，其格式有点不同。我希望它与上面的文本输入对齐。因此，我将一个空标签作为＆＃34;验证＆＃34;之后的第一个元素。输入

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

此外，如果我放置文本输入而不是空标签元素，则复选框在中间垂直对齐。

有人可以解释一下这个原因以及我如何解决它？

Answer 1

将此类添加到复选框

.middle
{
vertical-align: middle;
}

Answer 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>