垂直对齐内联块元素

Question

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

所以我想对齐

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

如何将div选项与第一个选项对齐？

我已尝试将additional-info位置设置为相对位置，将choice设置为绝对位置。但后来他们互相重叠，这样做并不好。

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

还尝试将additional-info显示设置为表格单元格并添加vertical-align top但不起作用。

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

更新：

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

你可以看看这里，我已经从头开始......

Demo

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

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

section {
    display: table;
    width: 100%;
}

HTML

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

jsFiddle

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>

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

（我知道我在这里已经完成了内联式，但这只是我快速整理的一个例子）