Как вертикально выровнять по середине кнопку в динамическом div

Я хотел бы центрировать вертикально выровненную кнопку в div, используя 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>

Как вы видите, у меня есть два столбца, один из которых содержит кнопку слева, другую - надпись. Когда label.length увеличивается, div меняет высоту → Я хочу, чтобы кнопка всегда была центрирована в div.

Ответы

Ответ 1

Вы можете использовать display:inline-block и vertical-align:middle:

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

Здесь демонстрационная скрипта.

Хотя вам нужно будет удалить пустое пространство между столбцом <div> в вашей разметке. Подробнее об этом см. этот ответ.

Ответ 2

Я использовал это. Проверьте свойство стиля. Это сделает трюк.

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

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

Ответ 3

Проблема заключается в том, что заполнение на H4 больше, чем кнопка. Вы можете обернуть кнопку в H4 (возможно, не лучшая практика) или изменить добавление кнопки в свой 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>

ИЛИ, оставьте кнопку как есть и примените этот CSS к H4..

h4 {
  margin-top: -0.5em;
}

http://bootply.com/106259