mor*_*gan 5 html css checkbox vertical-alignment twitter-bootstrap
我正在尝试垂直对齐一列复选框+标签的复选框.理想情况下,我希望元素位于页面的中心,但复选框本身垂直对齐.
<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>Run Code Online (Sandbox Code Playgroud)
这是一种方法
<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>
Run Code Online (Sandbox Code Playgroud)
另一种方法是:
<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>
Run Code Online (Sandbox Code Playgroud)
两者都产生相同的结果
只需添加这些样式即可
input[type="checkbox"] {
vertical-align: middle;
}
.span12.pagination-centered {
margin: 25px auto;
width: 100px;
}
Run Code Online (Sandbox Code Playgroud)
input[type="checkbox"] {
vertical-align: middle;
}
.span12.pagination-centered {
margin: 25px auto;
width: 100px;
}
Run Code Online (Sandbox Code Playgroud)
input[type="checkbox"] {
vertical-align: middle;
}
.span12.pagination-centered {
margin: 50px auto;
width: 100px;
}Run Code Online (Sandbox Code Playgroud)