Ionic Framework Center button within ionic item


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-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>



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>


stackblitz – code

Answered By – core114

Leave a Comment