如何将我的复选框与css对齐？

Question

我需要做一个带有复选框和列表的表单。我使用Bootstrap作为我的复选框和列表，但问题是文本和复选框是未对齐的。

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

如何对齐它们？

Answer 1

您可以使用bootstrap.css提供的类，例如form-control，或者您可以尝试：

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

这个CSS规则集说，＆＃34;每个输入元素将垂直对齐到中间，并且具有大写字母的等效高度。＆＃34;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;