Align ion-fab buttons horizontal center

Ionic Framework ionic-v3
1

Hey Guys, I’m new to ionic and to this forum.This is my first ever topic on this forum. Hope I’ll get the proper solution from ionic experts:

So basically, I’ve 3 ion-fab button for social logins and I want to align them horizontal center like this:
middle

I tried many solutions, but no luck. This is what I’m getting

Screenshot_1533317240
Screenshot_1533317240.png1080×215 22.6 KB

Here’s my code:

  <ion-fab bottom center>
    <ion-row text-center>
      <ion-col>
        <button ion-fab fab-fixed color="primary" (click)="facebookLogin()"><ion-icon name="logo-facebook"></ion-icon></button>
      </ion-col>
      <ion-col>
        <button ion-fab fab-fixed color="danger" (click)="googleLogin()"><ion-icon name="logo-googleplus"></ion-icon></button>
      </ion-col>
      <ion-col>
        <button ion-fab fab-fixed color="secondary" (click)="twitterLogin()"><ion-icon name="logo-twitter"></ion-icon></button>
      </ion-col>
    </ion-row>
  </ion-fab>
2

patch work if you want just fab button and not fab animation :sweat_smile::wink:

<ion-row text-center>
   <ion-col col-3></ion-col>
      <ion-col  col-2>
        <button ion-fab fab-fixed color="primary" (click)="facebookLogin()"><ion-icon name="logo-facebook"></ion-icon></button>
      </ion-col>
      <ion-col  col-2>
        <button ion-fab fab-fixed color="danger" (click)="googleLogin()"><ion-icon name="logo-googleplus"></ion-icon></button>
      </ion-col>
      <ion-col  col-2>
        <button ion-fab fab-fixed color="secondary" (click)="twitterLogin()"><ion-icon name="logo-twitter"></ion-icon></button>
      </ion-col>
<ion-col col-3></ion-col>
</ion-row>
1 Like