CODEWITHSUNDEEP
csstwitter-bootstrap
Sergio
Sergio

Reputation: 628

Bootstrap - Vertical Alignment in a DIV

I'm trying to vertically center a Bootstrap column.

The current state of my try:

HTML

<div class="out">
 <div class="inn">
     <div class="col-xs-12 col-sm-6 lft v-align" >
       LEFT
     </div>  
     <div class="col-xs-12 col-sm-6 rght">
        <div style="height: 200px">
           RIGHT
        <div>    
     </div> 
 </div>
</div>

CSS

.out{
  display:table;
  width:100%;
}

.inn{
  display:table-cell;
  vertical-align:middle;
  background-color: blue;
}
.lft{
  background-color: green;
}
.rght{
  background-color: orange;
}
.v-align {
  float: left;
  display: inline-block;
  vertical-align: middle;
}

I did try before:

 .col-sm-middle {
    vertical-align: middle;
 }
  .row-sm-height {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}

But this piece kills the responsive behavior of the columns.

I also did try:

.vert{
   position: relative;
   text-align: center;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);  
}

This one doesn't work at all on bootstrap columns.

JSFFIDLE

Any help will very appreciated.

Upvotes: 1

Views: 1240

Answers (1)

George
George

Reputation: 36784

Bootstrap's columns serve no purpose in what you're trying to do. Simply use your table-cell trick without using the grid system:

HTML

<div class="out">
    <div class="col">
        <div class="lft">
            LEFT
        </div>
    </div>
    <div class="col">
        <div style="height: 200px" class="rght">
            RIGHT
        </div>
    </div>
</div>

CSS

.out {
    display:table;
    width:100%;
    background-color: blue;
}
.col {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
}
.lft {
    background-color: green;
}
.rght {
    background-color: orange;
}

JSFiddle

If you are going to want it to be mobile responsive you can have these table styles only apply over a certain width:

@media (min-width: 992px){
    .out {
        display:table;
        width:100%;
    }
    .col {
        display: table-cell;
        vertical-align: middle;
        width: 50%;
    }
}

JSFiddle

Upvotes: 1

Related Questions