CODEWITHSUNDEEP
htmlcssionic-framework
CoderTn
CoderTn

Reputation: 997

How to center horizontally an element in ionic

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 :

enter image description here

Upvotes: 2

Views: 9112

Answers (2)

Kunchana G. Ekanayaka
Kunchana G. Ekanayaka

Reputation: 1

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

Upvotes: 0

Aer0
Aer0

Reputation: 3907

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>

Upvotes: 6

Related Questions