How to center a button in footer?

Ionic Framework ionic-v3
1

Hi,

I want to implement 3 ion-botton in footer, each algining to left, middle and right respectively.
It seems ion-buttons with start end can do left and right.

How about middle? I have checked API and ion component, it seems there is no out-of-box manner to get it done?

Br,
Xi Xiao

2

One solution:

<ion-footer>
  <ion-grid>
    <ion-row>
    <ion-col><button ion-button>button 1</button></ion-col>
    <ion-col style="text-align: center"><button ion-button>button 2</button></ion-col>
    <ion-col style="text-align: right"><button ion-button>button 3</button></ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>
2 Likes
3

Thanks, this solution works well.