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

Question

I want to center an element in ionic horizontally with the same margin on the left and right

 <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 is not applying centering, this is the output:

Answer 1

You have to use ion-justify-content-center on a flexbox node. So either you put display: flex on your wrapper div node, or you just use ion-justify-content-center on <ion-row> like so.

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