Mam grupę z polem wyboru. Są one centralnie wyrównane z polami wyboru u góry i tekstu poniżej. Oto co mam na myśli:

Więc chcę się wyrównać

Tak więc każde pole wyboru + etykieta jest zapakowane w div z klasąchoice. Wszystkochoice div są częścią diva zadditional-info. choice divs to elementy blokowe inline o stałej szerokości.

Jak wyrównaćdiv wybór być na tej samej wysokości co pierwszy?

Próbowałem ustawićadditional-info pozycja względna ichoice do absolutnego. Ale potem nakładają się na siebie, więc nie było dobrze.

Próbowałem również ustawićchoice div display do inline, ale wtedy bieżący podział layoutu i div są wyświetlane w środku w trzech rzędach.

Próbowałem również ustawićadditional-info wyświetlaj do komórki tabeli i dodawaj pionowe wyrównanie do góry, ale to też nie działa.

Co jeszcze mogę spróbować? wszelkie sugestie są mile widziane

Aktualizacja :

Oto mój 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>

Niektóre 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;
}