HTML bootstrap div button alignement - css

Question

I have this code:
<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>
and result appears as:
My question is: how do I align the button at the center of the panel?
PS: It should be inside the green panel.

Answer 1

First of all, remove float: right. Then text-align: center should do the job:
.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

Delete float from button and add text-align: center to div element.

Answer 3

Here you go. Full bootstraps' classes used with no tricks. Just adding align-items-center solves the problem. But do not use the float style itself. If you use the CSS framework, please be so kind to read the docs. There are a lot of features which are enough for not to manipulate the styles for layout.
<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

you can do the following if you still want the button to be floated right, but centered vertically inside of your panel-footer div
.panel-footer {
background-color: #B7B56E;
overflow: auto;
}
.btnClass {
float: right;
}
<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>