CODEWITHSUNDEEP
cssionic2
Can Kurucu
Can Kurucu

Reputation: 47

Ionic 2 Page heading is not centered

There is a back button that I created in the category page. My codes are as follows;

<ion-header >

  <ion-navbar hideBackButton color="anasayfaBaslik" color="anasayfaBaslik"  align-title="center">
    <ion-buttons [hidden]="kategoriGeriButtonGoster">
      <button class="kategoriGeriButton" ion-button left (click)="goback()">
        <ion-icon start name="arrow-back"></ion-icon>&nbsp;
        Geri
        </button>
      </ion-buttons>
    <ion-title class="kategoriBaslik">{{ baslik }}</ion-title>
  </ion-navbar>

</ion-header>

How do I center the page heading?

enter image description here

Upvotes: 2

Views: 47

Answers (1)

johniejohnie
johniejohnie

Reputation: 523

Can you try to position is absolute? I remember this being a bug on Ionic Framework.

.kategoriBaslik {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 100%;
    width: 70%;
    text-align: center;
}

Upvotes: 1

Related Questions