垂直對齊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>

兩者都產生相同的結果

Answer 2

你可以這樣試試，

<div class="container">
    <div class="row vertical-align">                  
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>

CSS

.vertical-align {
     align-items: center;
}

Answer 3

只需添加這些樣式

input[type="checkbox"] {
    vertical-align: middle;
}

.span12.pagination-centered {
    margin: 25px auto;
    width: 100px;
}

 input[type="checkbox"] { vertical-align: middle; } .span12.pagination-centered { margin: 50px auto; width: 100px; } 

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