如何将我的复选框与 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

你可以像form-control一样使用bootstrap.css提供的类，或者你可以试试这个：

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

这个 CSS 规则集说，“每个输入元素都将垂直对齐到中间，并且具有与大写字母相同的高度。”

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>