How to center a button in footer in ionic 3? - ionic-framework

Question

I want to implement three ion-button's in ion-footer, each algining to left, middle and right respectively.
It seems ion-button's with start and end can do left and right.
How about middle? I have checked the API and ion component, it seems ion-title is by default centered, but there is no out-of-box way to get button in the middle?

Answer 1

In the ion-footer element, try using ion-grid and then remove the padding from the grid.
<ion-footer>
<ion-grid>
<ion-row no-padding no-margin>
<ion-col col-4 no-padding>
<button ion-button full>Button 1</button>
</ion-col>
<ion-col col-4 no-padding>
<button ion-button full>Button 2</button>
</ion-col>
<ion-col col-4 no-padding>
<button ion-button full>Button 3</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>

Answer 2

You can add the float-start and float-end to the first and third button respectively. By making use of float-[start|end] instead of float-[left|right] your buttons will shift position with the app direction
HTML:
<ion-footer>
<div class="btn-wrapper">
<button ion-button float-start>Button1</button>
<button ion-button>Button2</button>
<button ion-button float-end>Button3</button>
</div>
</ion-footer>
CSS:
.btn-wrapper {
text-align: center;
}
EDIT:
Added a wrapping <div> for the buttons and gave it the style text-align: center;, becasue I was experiencing weird animation behavior without the wrapping <div>.