CODEWITHSUNDEEP
ionic2
Tecnico
Tecnico

Reputation: 459

Misalignment align text in the center

I have a problem align text in the center in the header because of arrow for back page. My code is like this:

<ion-header>
  <ion-navbar>
    <ion-title>
        <center>
            Domótica
        </center>
    </ion-title> 
  </ion-navbar>
</ion-header>

enter image description here

But the text "Domótica" is not in the center. Somebody know who can resolve it? Thank in advace.

Best regards.

Upvotes: 1

Views: 2082

Answers (2)

Jayser Mendez
Jayser Mendez

Reputation: 21

I know it is late for this answer but I found a solution to get the back button working using centered title.

You can add this piece of code to your app and it is fixed.

.back-button.show-back-button {
z-index: 9999;
display: inline-block;
}

It basically move the Z position of the button to the top because by using position: absolute for the title it takes the whole space overriding all elements.

Upvotes: 2

nahoang
nahoang

Reputation: 2478

I think you should use sass to apply customer css . You have to locate sample code in your test.scss in same location with html page

ion-title {
   position: absolute;
   top: 0;
   left: 0;
   padding: 0 90px 1px;
   width: 100%;
   height: 100%;
   text-align: center;

}

Cheer !

Upvotes: 1

Related Questions