Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 :

enter image description here

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;
}
like image 243
London Avatar asked Jan 06 '14 09:01

London


People also ask

How do you align inline elements horizontally?

Inline-elements can be aligned horizontally with the help of CSS text-align property.

How do you align a block element?

Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.

How do you vertically align elements in CSS?

The vertical-align property in CSS controls how elements set next to each other on a line are lined up. In order for this to work, the elements need to be set along a baseline. As in, inline (e.g. <span> , <img> ) or inline-block (e.g. as set by the display property) elements.


1 Answers

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>
like image 190
Mr. Alien Avatar answered Sep 29 '22 14:09

Mr. Alien