Html 垂直对齐水平内联块元素

我有一个复选框组。它们与顶部的复选框和下面的文本居中对齐。我的意思是：

所以我想保持一致

因此，每个复选框+标签都用class

choice

包装在一个div中。所有

选项

div都是div的一部分，带有

附加信息

<代码>选项div是具有固定宽度的内联块元素

如何将

div

选项与第一个选项的高度对齐

我已尝试将

附加信息

位置设置为相对，将

选项

设置为绝对。但是它们彼此重叠，所以这不好

还尝试将<代码>选择< /Cord>DIV显示设置为内联，但当前布局中断和div显示在中间的三行。

还尝试将

附加信息

显示设置为表格单元格，并添加垂直对齐顶部，但也不起作用

我还能试什么？欢迎提出任何建议

更新：

这是我的HTML：

<div class="additional-info">
  <p class="text required control-label">
    Additional info
  </p>
  <div class="input boolean optional certificate"><input name="user[certificate]" type="hidden" value="0"><label class="boolean optional control-label checkbox" for="certificate"><input class="boolean optional require-one" id="certificate" name="user[certificate]" type="checkbox" value="1">I've got a valid certificate and permits</label></div>
  <div class="input boolean optional no_garden"><input name="user[no_garden]" type="hidden" value="0"><label class="boolean optional control-label checkbox" for="no_garden"><input class="boolean optional require-one" id="no_garden" name="user[no_garden]" type="checkbox" value="1">I don't have garden</label></div>
  <div class="input boolean optional has_garden"><input name="user[has_garden]" type="hidden" value="0"><label class="boolean optional control-label checkbox" for="has_garden"><input class="boolean optional require-one" id="has_garden" name="user[has_garden]" type="checkbox" value="1">I have a garden</label></div>
</div>

---

我已经根据你上面所说的做了一个内联块级别。在父div上使用设置的宽度，然后在子元素上使用设置的宽度，将强制项目堆叠，而不是显示在水平列表中

<div style="display:inline-block; width:150px;">
<div style="display:inline-block; width:150px;"><input /></div>
    <div style="display:inline-block; width:150px;"><input /></div>
    <div style="display:inline-block; width:150px;"><input /></div>
    <div style="display:inline-block; width:150px;"><input /></div>
</div>

值得一试，看看它是否适用于您的表单

---

（我知道我在这里做的是内联风格，但这正是我快速组合的一个示例）

你可以看看这里，我是从头开始做的

所以我在这里做的是，我使用了

display:table用于容器元素和am，使用
显示：表格单元格div
和子
div
现在是表单元格，我使用了
vertical align:top以便元素与这些单元格中的顶部对齐


部分{
显示：表格；
宽度：100%；
}
分区>分区{
垂直对齐：顶部；
显示：表格单元格；
宽度：33%；
文本对齐：居中；
}
附加信息


我有有效的许可证


我有一张有效的证书


I证书
为什么不使用一个简单的浮点来去除剩余的“空白”

.additional-info div {
  width: 32.6%;
  /*display: inline-block;*/
  text-align: center;
  float: left;
}


。其他信息{
位置：相对位置；
}
.附加资料组{
宽度：32.6%；
/*显示：内联块*/
文本对齐：居中；
浮动：左；
}
输入[type=“checkbox”]{
浮动：无；
显示：块；
保证金：0自动；
}

附加信息

我有有效的证书和许可证
我没有花园
我有一个花园
@Alien先生马上就来。感谢您将其添加到一个易于编码和使用的列表中。人们通常从左到右阅读，所以列表更容易扫描。好的，我把table cell设置为parent div（附加信息），现在我明白了。这很有效，谢谢！
.additional-info div {
  width: 32.6%;
  /*display: inline-block;*/
  text-align: center;
  float: left;
}