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

回答1:

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

回答2:

The current answer (Ionic 4) requires that in addition to using text-center, your wrap the buttons in a label. This works correctly:

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

回答3:

You can use ionic's text-center CSS Utility. See https://ionicframework.com/docs/theming/css-utilities/

Example Usage:

<ion-item text-center>
  <button ion-button>click me</button>
</ion-item>

If you don't want the whole item content to be centered you can use css to center just the button.

e.g. wrapping the button with a text-center wrapper div inside the ion-item

来源：https://stackoverflow.com/questions/53092411/ionic-framework-center-button-within-ionic-item

标签

ionic-framework

button