HTML bootstrap div按钮对齐

Question

我有这段代码：

<div class="panel-footer rounded" style="background-color: #B7B56E">
    <button class="btn btn-xs rounded" (click)="refreshNow()" style="float: right"><span class="glyphicon glyphicon-refresh"></span><small>{{nextTick|date: 'mediumTime'}}</small></button>
</div>

，结果显示为：

我的问题是：如何对齐面板中央的按钮？

PS：它应该在绿色面板内。

Answer 1

首先，删除float: right。然后text-align: center应该完成这项工作：

.panel-footer {
  background-color: #B7B56E;
  text-align: center;
}

<div class="panel-footer rounded">
  <button class="btn btn-xs rounded" (click)="refreshNow()"><span class="glyphicon glyphicon-refresh"></span><small>12 Oct 2017</small></button>
</div>

Answer 2

从按钮中删除float并将text-align：center添加到div元素。

Answer 3

你走了。完全bootstraps的类没有技巧。只需添加align-items-center即可解决问题。但是不要使用float样式本身。如果你使用CSS框架，请​​非常友好地阅读文档。有很多功能足以不操作布局样式。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row align-items-center bg-info">
<button class="col btn btn-outline-primary">Hello I'm centered</button>
</div>
</div>

Answer 4

如果您仍希望按钮向右浮动，但是在面板页脚div内垂直居中，则可以执行以下操作

＆＃13;

＆＃13;

.panel-footer {
  background-color: #B7B56E;
  overflow: auto; 
}

.btnClass {
  float: right;
}

＆＃13;

<div class="panel-footer rounded">
  <button class="btn btn-xs rounded btnClass" id="button" (click)="refreshNow()"><span class="glyphicon glyphicon-refresh"></span><small>12 Oct 2017</small></button>
</div>

＆＃13;

＆＃13;

＆＃13;