CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcheckboxvertical-alignment
morgan
morgan

Reputation: 143

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

Upvotes: 12

Views: 32889

Answers (3)

Jinu Kurian
Jinu Kurian

Reputation: 9416

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>

Upvotes: 5

Balaji Ravichandran
Balaji Ravichandran

Reputation: 167

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

Upvotes: 3

Satej S
Satej S

Reputation: 2156

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

Upvotes: 9

Related Questions