垂直对齐引导复选框答案

【问题标题】：Vertically Align Bootstrap Checkbox垂直对齐引导复选框
【发布时间】：2016-05-05 07:06:35
【问题描述】：

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

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

【问题讨论】：

标签： html css twitter-bootstrap checkbox vertical-alignment

【解决方案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>

两者产生相同的结果

【讨论】：

【解决方案2】：

只需添加这些样式

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>

【讨论】：

【解决方案3】：

你可以这样试试，

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

【讨论】：