在 iOS 设备上运行时，Ionic bar-header 未居中

Posted 2023-03-05

【中文标题】在 iOS 设备上运行时，Ionic bar-header 未居中

【英文标题】：Ionic bar-header not centered when running on iOS device

【发布时间】：2016-10-18 03:18:04

【问题描述】：

我正在使用 Ionic 构建适用于 android 和 ios 的应用。 我在我的视图中使用bar-header 作为标题：

<ion-view view-title="Home" class="tab-home">
    <ion-content class="padding">
        <div class="bar bar-header bar-positive">
            <div class="h1 title">The European Experience</div>
        </div>
        <div class="bar bar-subheader bar-stable">
            <h2 class="title">Companion App</h2>
        </div>
        <div class="content has-header padding">
            ...
        </div>
    </ion-content>
</ion-view>

当在我的浏览器中显示 ionic serve -l 时，标题正确显示：

在真正的 Android 设备上运行时，它也能正常工作： 但是当我在 iOS 设备（物理设备或模拟器）上运行应用程序时，标题不是垂直居中的：

我尝试添加 CSS 以明确指定 vertical-align 或 text-align，但没有成功。

什么可以解释这个问题？我怎样才能在这个标题中居中标题？

【参考方案1】：

这种问题很常见，具体取决于您使用的 Ios / Ionic 版本， 您是否尝试使用标签？ ion-header-bar

【讨论】：

我没试过，我会告诉你它是否有助于解决这个问题！