Ionic Framework Center button within ionic item

Issue

I am using ionic framework. The following code make the buttons align left. I would like to make the buttons align center. How can I do that ? Thanks

<ion-list>    
  <ion-item><button ion-button (click)"gotoPage1();">Go page 1</button></ion-item>
  <ion-item><button ion-button (click)"gotoPage2()">Go page 2</button></ion-item>
  <ion-item><button ion-button (click)"gotoPage3()">Go page 3</button></ion-item>

</ion-list>

Solution

Ionic provides a set of utility attributes that can be used on any element in order to modify the text or adjust the padding or margin.

Read – Ionic CSS Utilities

you can use text-center

The inline contents are centered within the line box.

Try like this’

<ion-list >    
  <ion-item  text-center ><button ion-button (click)"gotoPage1(); ">Go page 1</button></ion-item>
  <ion-item text-center><button ion-button (click)"gotoPage2()">Go page 2</button></ion-item>
  <ion-item text-center><button ion-button (click)"gotoPage3()">Go page 3</button></ion-item>

</ion-list>

stackblitz – code

Answered By – core114