垂直对齐水平行内块元素

Question

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

所以我想对齐

因此，每个复选框+标签被包裹在带班一个div choice 。 所有choice div 都是带有additional-info div 的一部分。 choice div 是具有固定宽度的行内块元素。

如何将div选择对齐到与第一个相同的高度？

我试过将additional-info位置设置为相对并将choice为绝对。 但后来它们相互重叠，所以这并不好。

还尝试将choice div 显示设置为内联，但当前布局中断，div 显示在三行中间。

还尝试将additional-info显示设置为表格单元格并添加垂直对齐顶部，但这也不起作用。

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

更新：

这是我的 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>

一些CSS：

.additional-info {
  position: relative;
}

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

input[type="checkbox"] {
  float: none;
  display: block;
  margin: 0 auto;
}

Answer 1

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

所以我在这里所做的是，我使用了display: table; 对于容器元素，我正在使用display: table-cell; 对于子div和子div现在是表格单元格，我使用了vertical-align: top; 以便元素与这些单元格的top对齐

 section { display: table; width: 100%; } section > div { vertical-align: top; display: table-cell; width: 33%; text-align: center; }

 <h4>Additional Info</h4> <section> <div> <input type="checkbox" /><br /> <label for="">I've got a valid certificate permits</label> </div> <div> <input type="checkbox" /><br /> <label for="">I've got a valid certificate</label> </div> <div> <input type="checkbox" /><br /> <label for="">I certificate</label> </div> </section>

Answer 2

为什么不使用简单的浮点数来摆脱剩余的“空白”：

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

 .additional-info { position: relative; } .additional-info div { width: 32.6%; /*display: inline-block;*/ text-align: center; float: left; } input[type="checkbox"] { float: none; display: block; margin: 0 auto; }

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

Answer 3

我已经根据你上面所说的做了一个内联块级别。 在父 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>

值得尝试看看它是否适用于您的表单吗？

（我知道我在这里以内联样式完成了它，但这只是我快速组合在一起的一个示例）