Html 如何在ionic 4中居中放置离子按钮?

Html 如何在ionic 4中居中放置离子按钮?,html,css,ionic-framework,ionic4,Html,Css,Ionic Framework,Ionic4,我有一个按钮,我想在爱奥尼亚中心,我已经尝试文本对齐:中心!很重要,但它不会与上面的项目一起居中,使它看起来很奇怪。 如何将“以后可能”按钮与其上方项目中的文本很好地居中 下面是我尝试过的html <ion-content no-padding> <ng-container style = "text-align: center;" *ngIf = "nextOptions == 'previous'"> <ion-item lines="n

我有一个按钮,我想在爱奥尼亚中心,我已经尝试文本对齐:中心!很重要,但它不会与上面的项目一起居中,使它看起来很奇怪。 如何将“以后可能”按钮与其上方项目中的文本很好地居中

下面是我尝试过的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>

也许以后吧
下一个

这将正确对齐

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

也许以后吧
下一个

您应该使用网格系统对应用程序中的内容进行结构化和对齐。另外,看看CSS实用程序,以使用正确的内置CSS样式



也许以后吧
下一个