[解決済み] ionic 4でion-buttonをセンタリングする方法は？[重複しています］

質問

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>

解決方法は？

を使用する必要があります。 グリッド のシステムを使って、アプリケーションのコンテンツを構成し、整列させることができます。さらに、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>