如何有选择地居中文本？

Question

我在 ionic 3

中有这种 header

我想做的是将主标题居中，同时忽略 space 被我的离子头像占据

这是我试过的

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

如何有选择地居中文本？

How do I selectively center text?

html

css

centering

ionic3