如何将复选框与CSS对齐？

Question

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?

Answer 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>