Vertically Align Bootstrap Checkbox
I'm Trying to Vertically Align Checkboxes for a Column of Checkboxes + Labels. Ideally, I'd Like the Elements to Be in the Center of the Page but with the...
I'm trying to vertically align checkboxes for a column of checkboxes + labels. Ideally, I'd like the elements to be in the center of the page but with the checkboxes themselves vertically aligned.
<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 Answers
This is one way to do it
<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>
Another way to do this is:
<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>
Both produce the same result
Simply add these styles
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>You can try like this,
<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;
}
Marcus Vance is a cybersecurity auditor and technology writer dedicated to educating the public about online safety, data privacy regulations, enterprise security, and emerging cyber threats.
