How to center horizontally an element in ionic

Issue

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 :

Solution

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>

Answered By - Aer0