Vertically align horizontal inline-block elements

css, html, vertical-alignment

Solution

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>

Problem

I've got a checkbox group. Which are centrally aligned with checkboxes on top and text below. Here is what I mean : So I want to align 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. How do I align `div` choice to be in the same height as the first one? 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. 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. 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 Update : Here is my 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> ``` Some 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; } ```

Original source