工具栏中的 Ionic 4 ion-title 未居中于 android

Question

我想知道这是否是一个常见问题。我的 ion-title 没有在 android 的工具栏中心。

我用谷歌搜索了它，但我找不到任何关于 ionic 4 的信息，我发现的是 ionic 3 中的一个非常好的解决方案。

这里是：

我想知道是否有人知道如何在 ionic4 中执行此操作？

这是一张在 android:

上的图片

Answer 1

Ionic v4 将 工具栏标题 保留在 android 设备的左侧，并在 IOS 设备的中心。

要使用特定行为，您可以使用 mode="md|ios"。 md 用于 android，ios 用于 IOS 设备。

因为你想让标题居中，你可以使用 mode="ios" 这将使工具栏标题在 android 和 ios 设备上居中。

这是我的 header:

<ion-header>
    <ion-toolbar mode="ios">
        <ion-title>
            Add New Rest
        </ion-title>
        <ion-icon slot="end" name="analytics"></ion-icon>
        <ion-buttons slot="start">
            <ion-buttons slot="start">
                <ion-back-button defaultHref="home"></ion-back-button>
            </ion-buttons>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

看看下面的截图

Answer 2

我已经在我的 android 上测试了以下内容，标题与其他按钮（例如后退按钮等）居中

不太确定它是否适用于 iOS 设备
希望这有助于：

<ion-toolbar>
    <ion-title style="width: 100%; position: absolute; left: 0; height: 0;">
        Title
    </ion-title>
</ion-toolbar>

Answer 3

添加 mode="ios" 确实有效。为了简化，您可以将 mode="ios" 添加到 index.html 中的主 HTML 标记，这将应用于整个应用程序，因此您不必将其添加到每个个人 HTML 页。

Answer 4

如果你想保持android模式，您可以在全局 .scss 文件中执行以下操作：

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

这种方式在 iOS 模式下标题已经居中，您只需更改 android

上的标题对齐方式

工具栏中的 Ionic 4 ion-title 未居中于 android

Ionic 4 ion-title in toolbar is not centered on android

ionic-framework

ionic4