Vertical Align Button In The Middle Of The Column- Bootstrap

I am using bootstrap and trying to vertically align the button in the column. Note : I cant use flex and also I can't define height as per standards. If I use margins it won't work

Solution 1:

Borrowing from the different cases of this problem and the source code mentioned on this link here.

---

Check my working fiddle with support for different media as well: here

---

HTML :

<divclass="container"><divclass="row"><divclass="row-height"><divclass="col-xs-4 col-height"><divclass="inside"><divclass="content"><h4>Some really large label that will wrap to multiple lines in small screens</h4></div></div></div><divclass="col-xs-6 col-height col-middle"><divclass="inside"><divclass="content"><h4>Some really large label that will wrap to multiple lines in small screens</h4></div></div></div><divclass="col-xs-2 col-height col-middle"><divclass="inside"><divclass="content"><buttonclass="btn"style="color: #660066;"><iclass="fa fa-arrow-left"data-ng-click="onClickBack()"></i></button></div></div></div></div></div></div>

---

CSS :

.inside {
  background: #ffffff;
}
.content {
  padding: 12px3px;
}
.row-height {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}
.col-height {
  display: table-cell;
  float: none;
  height: 100%;
}
.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;
}
@media (min-width: 480px) {
  .row-xs-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-xs-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-xs-top {
    vertical-align: top;
  }
  .col-xs-middle {
    vertical-align: middle;
  }
  .col-xs-bottom {
    vertical-align: bottom;
  }
}
@media (min-width: 768px) {
  .row-sm-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-sm-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-sm-top {
    vertical-align: top;
  }
  .col-sm-middle {
    vertical-align: middle;
  }
  .col-sm-bottom {
    vertical-align: bottom;
  }
}
@media (min-width: 992px) {
  .row-md-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-md-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-md-top {
    vertical-align: top;
  }
  .col-md-middle {
    vertical-align: middle;
  }
  .col-md-bottom {
    vertical-align: bottom;
  }
}
@media (min-width: 1200px) {
  .row-lg-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-lg-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-lg-top {
    vertical-align: top;
  }
  .col-lg-middle {
    vertical-align: middle;
  }
  .col-lg-bottom {
    vertical-align: bottom;
  }
}
body {
  padding-bottom: 40px;
}
h1 {
  margin: 40px0px20px0px;
  color: #95c500;
  font-size: 28px;
  line-height: 34px;
  text-align: center;
}
[class*="col-"] {
  border: none;
  background: #ffffff;
}
html,
body {
  width: 100%;
  height: 100%;
}
html {
  display: table;
}
body {
  display: table-cell;
  vertical-align: top;
}

Solution 2:

working JS Fiddle:

CSS changes :

.col-xs-2, .col-xs-6 {
   display: inline-block;
}
.vcenter {
     float:none;
    display:inline-block;
    vertical-align:middle;
    margin-right:-4px;
}