如何在离子 4 中居中离子按钮？

Question

我有一个按钮，我想以 ionic 居中，我尝试过 text-align: center !important，但它不会与上面的项目一起居中，使它看起来很奇怪。如何将“也许稍后”按钮与其上方项目中的文本很好地居中

下面是我试过的 html

<ion-content no-padding>  
  <ng-container style = "text-align: center;" *ngIf = "nextOptions == 'previous'">
      <ion-item  lines="none" no-padding style = "text-align: center;" id="projectTitle" color="transparent">
            <ion-input [(ngModel)]="title" class="text-input" placeholder="Project Title"></ion-input>
               </ion-item>
                 <div style="text-align: center !important;" >
                 <ion-button  (click)="nextOption()" *ngIf ="!title"  style="margin-top: 10%; margin-left: 0%" color ="transparent">maybe later</ion-button>
                 <ion-button  (click)="nextOption()" *ngIf = "title"   color ="transparent">next</ion-button>
               </div> 
     </ng-container>

Answer 1

这将正确对齐

<ng-container>
<ion-list style="text-align:center">

        <ion-input color="transparent" class="text-input" placeholder="Project Title"></ion-input>
        <ion-button expand="block" fill="clear" color="transparent">maybe later</ion-button>
        <ion-button expand="block" fill="clear" color="transparent">next</ion-button>

</ion-list>
</ng-container>

Answer 2

您应该使用Ionic的GRID系统来构建和对齐应用程序中的内容。另外看看 CSS Utilities 以使用正确的内置 CSS 样式。

https://ionicframework.com/docs/api/grid
https://ionicframework.com/docs/layout/css-utilities

<ion-grid>
  <ion-row class="ion-align-items-center">
    <ion-col size="12" class="ion-text-center">
      <ion-item lines="none" id="projectTitle" *ngIf="nextOptions == 'previous'">
        <ion-input name="title" [(ngModel)]="title" class="text-input" placeholder="Project Title"></ion-input>
      </ion-item>
    </ion-col>
    <ion-col size="12" class="ion-text-center">
      <ion-button (click)="nextOption()" fill="clear">
        <span *ngIf="!title">maybe later</span>
        <span *ngIf="title">next</span>
      </ion-button>
    </ion-col>
  </ion-row>
</ion-grid>