垂直对齐水平行内块元素 [英] Vertically align horizontal inline-block elements

问题描述

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

I've got a checkbox group. Which are centrally aligned with checkboxes on top and text below. Here is what I mean :

所以我想对齐

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

So each checkbox + label is wrapped in a div with class choice. All choice divs are part of div with additional-info. choice divs are inline-block elements with fixed width.

如何将div选择与第一个选择的高度对齐?

How do I align div choice to be in the same height as the first one?

我尝试将additional-info位置设置为相对位置，将choice位置设置为绝对位置.但是然后它们彼此重叠，所以不好.

I've tried setting the additional-info position to relative and choice to absolute. But then they overlap each other so that wasn't good.

还尝试将choice div显示设置为嵌入式，但是当前布局中断并且div显示在三行中间.

Also tried setting the choice div display to inline but then the current layout breaks and divs are displayed in the middle in three rows.

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

Also tried to set additional-info display to table-cell and adding vertical-align top but that didn't work either.

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

What else can I try? any suggestions is welcome

更新:

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

推荐答案

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

You can take a look here, I've made it from scratch...

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

So what I did here is, I've used display: table; for the container element and am using display: table-cell; for the child div and as the child div are now table cells, I used vertical-align: top; so that the elements align to the top in those cells

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>

这篇关于垂直对齐水平行内块元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！