如何选择性地居中文本？

Question

我在离子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;
}