如何有选择地将文字居中？

Question

I have this kind of header in ionic 3

What I wanted to do was center the home title while ignoring the space occupied by my ion avatar

Here's what I tried

<ion-header >

  <ion-navbar style="text-align: center;">
    <ion-title>Home</ion-title>

    <ion-buttons end>
      <button ion-button round clear (click)="goToAccountPage()">
        <ion-item class="transparent">
            <ion-avatar item-end>
                <!-- <img src="{{photo_url}}"> -->
                <img [src]="photo_url" >
              </ion-avatar>
        </ion-item>

      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

and this

<ion-header >

  <ion-navbar>
    <ion-title text-center>Home</ion-title>

    <ion-buttons end>
      <button ion-button round clear (click)="goToAccountPage()">
        <ion-item class="transparent">
            <ion-avatar item-end>
                <!-- <img src="{{photo_url}}"> -->
                <img [src]="photo_url" >
              </ion-avatar>
        </ion-item>

      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

And then I tried implementing it directly and not inline

 <ion-title class="center">Home</ion-title>

.center{
    text-align: center;
}

To those who will encounter the same problem, please go to nourza's awesome and responsive answer :)

From this

to this

5]

Answer 1

Try this

 .center{
            position: absolute;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%) }

Answer 2

You can use the following solution to selectively center text:

{
   position: absolute;
   text-align: center;
   width: 100%;
   left: 0;
}