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

Question

我有一个复选框组。其中，复选框置中于上方的文本下方。这是我的意思：

所以我想要对齐。

因此，每个复选框+标签都被包含在一个类为“choice”的div中。所有“choice” div均属于带有“additional-info”的div。choice div是具有固定宽度的inline-block元素。

如何将

choice与第一个

对齐？

我尝试将additional-info position设置为relative，choice设置为absolute。但是，它们重叠在一起，这不好。

还尝试将choice div显示设置为inline，但当前布局会破坏，divs在三行中间显示。

还尝试将additional-info display设置为table-cell并添加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;
}

- London

---

@Mr. Alien，好的，马上就来。谢谢。 - London

将程序相关的内容从英语翻译为中文。只返回翻译后的文本：将其编写为更易于编码和使用的列表形式。人们通常从左到右阅读，因此列表更易于扫描。 - matpol

Answer 1

你可以在这里看一下，我从零开始做了它...

所以我做的是，在容器元素中使用了"display: table;"，并且对于子

使用"display: table-cell;"，由于子

现在是表格单元格，因此我使用"vertical-align: 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>

- Mr. Alien

---

好的，我已将table-cell设置为父div（additional-info），现在我明白了。这样可以正常工作，谢谢！ - London

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>

- nkmol

Answer 3

根据您上面说的，我已经完成了一个基于inline-block级别的样式。在父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>

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

（我知道我在这里使用了内联样式，但这只是我快速组合的一个例子）

- BoBFiSh