Vertically align horizontal inline-block elements

Question

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

Answer 1

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

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>

Answer 2

Why not use a simple float to get rid of the remaining 'white space':

.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

I have done an inline-block level based on what you said above. Using a set width on the parent div and then child elements forces the items to stack rather than appear in a horizontal list.

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

Worth trying to see if it works for your form?

(I know I've done it here as inline-style, but this is just as an example I quickly put together)