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 :

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

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)