3

I created a structure composed by two columns, the first have three radio buttons which I need to align to center (vertically), and the second contains some input field.

The structure have the following configuration:

<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="mt-3 content-checkbox">
      <div class="custom-control custom-radio">
        <input type="radio" id="foo" name="test" checked class="custom-control-input">
        <label class="custom-control-label" for="foo">Foo</label>
      </div>
      <div class="custom-control custom-radio">
        <input type="radio" id="foo1" name="test" class="custom-control-input">
        <label class="custom-control-label" for="foo1">Foo</label>
      </div>
      <div class="custom-control custom-radio">
        <input type="radio" id="foo2" name="test" class="custom-control-input">
        <label class="custom-control-label" for="foo2">Test</label>
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="mt-3 text-center">
      <div class="form-group">
        <div class="form-group">
          <label>Foo1</label>
          <input type="text" class="form-control date" id="birthdatepicker" data-toggle="date-picker" data-single-date-picker="true">
        </div>
        <div class="form-group">
          <label>Foo2</label>
          <input type="text" class="form-control date" id="daterangetime" data-toggle="date-picker" data-time-picker="true" data-locale="{'format': 'DD/MM hh:mm A'}">
        </div>
      </div>
    </div>
  </div>
</div>

as you can see the result is this:

enter image description here

how can I align the radio button to the center vertically?

This is a JSFIDDLE.

KOPPER
  • 73
  • 7
  • 1
    @KOPPER Hello and welcome to Stack Overflow! Your question has been closed as duplicate. If the linked question did not help you, you can edit this question explaining how it didn't help. An edit like that would get your question reviewed and might get it reopened. Please don't get mad at users for closing as duplicate, they are users like you trying to curate the site. Duplicate questions are not bad because they point to answers. Having many duplicate questions would mean that good answers are spread over many questions. Duplicate closing aims to collect answers in one place. – Modus Tollens Oct 04 '18 at 09:50
  • If you read the other answers in the original question you'll find they are duplicates and the solution is the same.. to use the `align-items-center justify-content-center` classes. It also appears you're asking the same question (also already answered using another account). – Carol Skelly Oct 04 '18 at 09:51

1 Answers1

3

You can add the following classes to the column (The one with the radio buttons.) and it would work:

d-flex align-items-center justify-content-center

You can find more information regarding these classes and more flex options here. This way you can even find more customizations that can help you even further.

Yousef_Shamshoum
  • 787
  • 3
  • 12