Центральная кнопка Ionic Framework внутри ионного элемента

Question

Я использую ионный каркас. Следующий код заставляет кнопки выравниваться влево. Я хотел бы, чтобы кнопки были выровнены по центру. Как я могу это сделать ? Спасибо

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

Answer 1

Ionic предоставляет набор служебных атрибутов, которые можно использовать в любом элементе для изменения текста или корректировки отступов или полей.

Чтение - Ионные Утилиты CSS

вы можете использовать text-center

Содержимое строки центрируется в рамке строки.

Попробуйте вот так '

<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 - код

Answer 2

Вы можете использовать утилиту text-center CSS от ionic. Смотри https://ionicframework.com/docs/theming/css-utilities/

Пример использования:

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

Если вы не хотите, чтобы содержимое всего элемента было центрировано, вы можете использовать css для центрирования только кнопки.

например. обертывание кнопки с text-center div-оберткой внутри ion-item