ionic-fab buttons won’t center in grid column with or without styling
is there a way to center fab buttons in a column?
<ion-grid >
<ion-row center>
<ion-col width-33 class="text-center">
<b>{{timer_data.slaps}}</b>
</ion-col>
<ion-col width-33 class="text-center">
<b>{{timer_data.grabs}}</b>
</ion-col>
<ion-col width-33 class="text-center">
<b>{{timer_data.holes}}</b>
</ion-col>
</ion-row>
<ion-row class="text-center" center>
<ion-col width-33 style="padding-left:13px">
<button ion-fab fab-right color="light" (click)="slap()">
<img src="assets/img/slap.svg"/>
</button>
</ion-col>
<ion-col width-33 style="padding-left:31px">
<button ion-fab color="primary" (click)="grabbit()">
<img src="assets/img/grabbit.svg"/>
</button>
</ion-col>
<ion-col width-33 style="padding-left:46px" (click)="hole()">
<button ion-fab color="favorite">
<img src="assets/img/hole.svg"/>
</button>
</ion-col>
</ion-row>
<ion-row center>
<ion-col width-33 class="text-center" style="padding-right:41px">
Slap
</ion-col>
<ion-col width-33 class="text-center">
Grabbit
</ion-col>
<ion-col width-33 class="text-center" style="padding-left:39px">
Hole
</ion-col>
</ion-row>