如何在动态div中垂直对齐中间的按钮

Question

我想使用bootstrap将div中的垂直对齐按钮居中

<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.当label.length增加时,div会改变高度 - >我希望按钮始终以div为中心.

Answer 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>标记中列s 之间的空白区域.有关详细信息,请参阅此答案.

Answer 2

我用过这个.检查"样式属性".那就行了.

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

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