html - 垂直对齐 Bootstrap 复选框

Question

我正在尝试垂直对齐一列复选框 + 标签的复选框。理想情况下，我希望元素位于页面中央，但复选框本身垂直对齐。

<div class="row">
  <div class="span12 pagination-centered">
  <div class="checkbox">
    <label><input type="checkbox" value="">asdfasdf</label>
  </div>
    <div class="checkbox">
    <label><input type="checkbox" value="">sdfasdf</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" value="">asfdasdf</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" value="">asdfasdf</label>
  </div>
 </div>
</div>

Answer 1

这是一种方法

<div class="row">  
    <div class="col-md-4 "></div>
  <div class="col-md-4" style="text-align:center">
  <div class="checkbox">
    <label><input type="checkbox" value="">asdfasdf</label>
  </div>
    <div class="checkbox">
    <label><input type="checkbox" value="">sdfasdf</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" value="">asfdasdf</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" value="">asdfasdf</label>
  </div>
 </div>
        <div class="col-md-4 "></div>
</div>

另一种方法是:

<div class="row">
  <div class="col-md-12" style="text-align:center">
  <div class="checkbox">
    <label><input type="checkbox" value="">asdfasdf</label>
  </div>
    <div class="checkbox">
    <label><input type="checkbox" value="">sdfasdf</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" value="">asfdasdf</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" value="">asdfasdf</label>
  </div>
 </div>
</div>

两者产生相同的结果