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

Question

我想使用引导程序在 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.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>

Answer 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