How can I align my checkbox with css?

问题

I need to do a form with checkboxes and a list. I used Bootstrap for my checkbox and list, but the problem is that the text and the checkbox are unaligned.

<div id="ContForm">
    <div id="Cajamitad1">
      <div class="checkbox">
        <label>
        <input type="checkbox" value="">Soy Vegano
        </label> 
      </div>

      <div class="checkbox">
        <label>
        <input type="checkbox" value="">Soy diabetico
        </label> 
      </div>    
    </div>

    <div id="Cajamitad2">
    <select class="form-control">
            <option>1</option>
            <option>2</option>
    </select>
    </div>

</div>   

How can I align them?

回答1:

You can use the classes provided by bootstrap.css like form-control or you can try this:

input {
  vertical-align: middle;
  line-height: 1;
}

This CSS ruleset says,"Every input element will be vertically aligned to the middle, and has the equivalent height of an uppercase letter."

input {
  vertical-align: middle;
  line-height: 1;
}

<div id="ContForm">
  <div id="Cajamitad1">
    <div class="checkbox">
      <label>
        <input type="checkbox" value="">Soy Vegano
      </label>
    </div>

    <div class="checkbox">
      <label>
        <input type="checkbox" value="">Soy Diabetico
      </label>
    </div>
  </div>

  <div id="Cajamitad2">
    <select>
      <option>1</option>
      <option>2</option>
    </select>
  </div>

</div>

来源：https://stackoverflow.com/questions/36049521/how-can-i-align-my-checkbox-with-css