Center fab buttons in column


#1

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>

#2

Any news here? Facing the same problem…


#3

Apply this class to the column where the fab button is placed. It works

   .flexcontainer {
       display: -webkit-flex;
       display: flex;
       -webkit-flex-direction: row;
       flex-direction: row;
       -webkit-align-items: center;
       align-items: center;
       -webkit-justify-content: center;
       justify-content: center;
    }

Example where I divided a row into 3 columns and centered three fab buttons there:

<ion-row >
    <ion-col class="flexcontainer">
        <button ion-fab><ion-icon name="call"></ion-icon></button>
    </ion-col>
    <ion-col class="flexcontainer">
      <button ion-fab><ion-icon name="mail"></ion-icon></button>
    </ion-col>
    <ion-col class="flexcontainer">
     <button ion-fab center><ion-icon name="share"></ion-icon></button>
    </ion-col>
</ion-row>

#4

@brownmetal Thank you!!!