垂直对齐水平行内块元素

Question

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

所以我想对齐

因此，每个复选框 + 标签都包含在一个类为 choice 的 div 中。所有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

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

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

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

所以我在这里所做的是，我使用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 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>

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

（我知道我在这里是作为内联样式完成的，但这只是我快速整理的一个示例）