中心对齐离子标题

Question

在下图中,离子标题绘画未在中心正确对齐,如何在准确的中心对齐

home.html的

<ion-header>

<ion-navbar>
<ion-title> <p align="center" style="color:white;">{{service.name}}</p>
</ion-title>
</ion-navbar>

</ion-header>

Answer 1

离子 CSS 属性已弃用。

代替：

'<ion-title text-center>'

和：

'<ion-title class="ion-text-center">'

Answer 2

只需将文本中心属性添加到ion-navbar标签或ion-title标签,如下所示:

<ion-navbar text-center>
  <ion-title>
    Some text...
  </ion-title>
</ion-navbar>

要么

<ion-navbar>
  <ion-title text-center>
    Some text...
  </ion-title>
</ion-navbar>

Answer 3

我刚刚在我们的应用程序中发生了这种情况/从 Ionic3 -> Ionic6 进行转换，令我困扰的是，没有一个答案似乎真正理解（在OP的示例中）“绘画”应该位于应用程序/屏幕的中心，不居中于未被 slot="start" 或 slot="end" 中可能存在或不存在的任何按钮/文本占用的剩余空间。

这并不完美，但效果很好。

ion-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}