How to vertical align middle a button in a dynamic div

Question

I'd like to center a vertically aligned button in a div using bootstrap

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

As you see, I have two columns,one containing a button in the left, another containing Label. When label.length is increased then the div'll change the height -> I want the button to be always centered in the div.

Answer 1

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.