How to vertical align middle a button in a dynamic div

Answer 1

I used this. Check the "style property". That will do the trick.

style='position: absolute;top: 50%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%)'>

<span class='glyphicon glyphicon-refresh spinning'>
</span> Loading...</button>

Answer 2

The problem is that the padding on the H4 is more than the button. You can wrap you button inside the H4 (perhaps not the best practice), or change the button padding in your CSS..

<div class="row">
  <div class="col-xs-2">
    <h4>
    <button class="btn" style="color: #660066;">
        <i class="fa fa-arrow-left" data-ng-click="onClickBack()"></i>
    </button>
    </h4>
  </div>
  <div class="col-xs-10">
    <h4> {{rootNode.nodeName}}</h4>
  </div>
</div>

OR, leave the button as is, and apply this CSS to the H4..

h4 {
  margin-top: -0.5em;
}

http://bootply.com/106259

Answer 3

You can use display:inline-block and vertical-align:middle:

.col-xs-2, .col-xs-10 {
    display: inline-block;
    float: none;
}
.col-xs-10 {
    vertical-align: middle;
}

Here's a demo fiddle.

Though you will have to make sure to remove the white space in between the column <div>s in your markup. Refer to this answer for more information on that.