如何在離子中水平居中元素

Question

我想在離子中水平居中一個元素，左右兩邊的邊距相同

 <div class="tabs-group" class="ion-justify-content-center"> <ion-row> <ion-col *ngFor="let i of tabsName,let j = index" size="4" (click)="switchToTabs(tabsindicator[j])" [ngClass]="tabs[tabsindicator[j]]? 'primary-button': 'secondary-button'"> <ion-grid> <ion-row> </ion-row> <ion-row> <ion-col> <b>{{tabsName[j]}} </b> </ion-col> </ion-row> </ion-grid> </ion-col> </ion-row> </div>

ion-justify-content-center ionic CSS class 未應用居中，這是 output：

Answer 1

您必須在 flexbox 節點上使用ion-justify-content-center 。 因此，要么將display: flex放在包裝器 div 節點上，要么像這樣在<ion-row>上使用ion-justify-content-center 。

<ion-row class="ion-justify-content-center">
      <ion-col>
        <b>{{tabsName[j]}} </b>
      </ion-col>
</ion-row>

Answer 2

<ion-grid style="height: 100%"> <ion-row justify-content-center align-items-center style="height: 100%; flex-direction: column"> <div text-center> <ion-icon name="images" style="zoom:5.0;" color="medium"></ion-icon> <h4>No Image Found</h4> <p>Looks like there are no converted image available at this moment, Please click <b> <ion-icon name="git-compare" color="medium" style="zoom:2.0;"></ion-icon> </b> button to convert a image</p> </div> </ion-row> </ion-grid>

https://codevampires.com/place-content-horizontally-vertically-in-center-ionic4/