将标签与复选框垂直对齐答案

【问题标题】：Vertically align label with checkbox将标签与复选框垂直对齐
【发布时间】：2014-11-13 21:09:13
【问题描述】：

为什么我的标签没有与我的复选框垂直对齐？文本垂直显示得更高。

<input type="checkbox" name="remember" id="remember" style="float: left; margin-top:0.5em;" />
<label style="font-size:12px; display: block; margin-left: 1.5em;">Remember me</label>

请帮忙。谢谢。

【问题讨论】：

删除margin-top

标签： html css

【解决方案1】：

#remember {
  float: left;
  margin-top: 1px; /* updated this */
}
#remember + label {
  font-size: 12px;
  display: block;
  margin-left: 1.5em;
}

<input type="checkbox" name="remember" id="remember" />
<label>Remember me</label>

旁注：避免使用内联 css

【讨论】：

【解决方案2】：

将display:block 更改为display: inline-block
并给出大约5px 的margin-top

【讨论】：

@webkit true，但我仍然必须将其更改为 inline-block 才能使其在 JSFiddle 中工作