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

Question

我在ionic 3中有这种标题

我想做的是将标题居中，而忽略了离子头像所占的空间

这就是我尝试过的

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

还有这个

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

然后我尝试直接而不是内联实现它

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

.center{
    text-align: center;
}

对于那些将遇到相同问题的人，请访问nourza的出色响应：）

从此

对此

5]

Answer 1

尝试一下

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

Answer 2

您可以使用以下解决方案有选择地使文本居中

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