离子导航栏：标题不在 Android 设备上居中答案

【问题标题】：Ionic nav-bar: Title is not centered on Android Device离子导航栏：标题不在 Android 设备上居中
【发布时间】：2018-08-13 02:54:47
【问题描述】：

我对 Ionic 很陌生，但我已经喜欢它了。我想使用nav-bar所以我实现了以下index.html：

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    <!-- Ionic -->
    <link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.css">
    <script type="text/javascript" src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- myApp -->
    <link rel="stylesheet" type="text/css" href="css/general.css">
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/factory.js"></script>
    <script type="text/javascript" src="js/controller.js"></script>
</head>

<body>
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>
</body>

</html>

在我的 app.js 中，我配置了路径：

var myApp = angular.module('myApp', ['ionic']);

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('index', {
        url: '/',
        templateUrl: 'views/home.html'
    }).state('prints', {
        url: '/prints',
        templateUrl: 'views/photo_prints.html'
    }).state('box', {
        url: '/box',
        templateUrl: 'views/photo_box.html'
    });

    $urlRouterProvider.otherwise("/");
});

还有一个示例页面：

<ion-view view-title="Home">
    <ion-content ng-controller="HomeController">
        <a href="#/prints">Prints</a></br></br>
        <a href="#/box">Box</a></br></br>
    </ion-content>
</ion-view>

当我在我的电脑上测试我的 google chrome 浏览器中的所有内容时，一切看起来都应该如此。标题居中。

当我现在在我的 android 设备上测试它时（据我所知，它也应该使用 google chrome），我得到以下结果：

如您所见，标题未居中。我该如何解决？不幸的是，我没有其他设备可以测试它。

【问题讨论】：

这不是bug，在android中基本上是标题左对齐

标签： ionic-framework ionic

【解决方案1】：

根据设计，Android 标题向左对齐。我相信改变这种行为的正确方法是在你的主要角度模块的角度 .config 方法中使用 $ionicConfigProvider 。此提供程序有一个属性 navBar.alignTitle(value) 其中“value”可以是平台（默认）、左、右或居中。这在文档here

中有描述

例如

var myApp = angular.module('reallyCoolApp', ['ionic']);

myApp.config(function($ionicConfigProvider) {

  // note that you can also chain configs
  $ionicConfigProvider.navBar.alignTitle('center');
});

我认为这是覆盖此行为的正确方法。

【讨论】：

这是正确的方法！它应该是 IMO 接受的答案。
你现在可以做类似 $ionicConfigProvider.platfrom.android.navBar.alignTitle('center');仅针对 android 或 $ionicConfigProvider.platfrom.ios.navBar.alignTitle('center');仅适用于 ios。这也适用于所有配置。有关完整列表，请参阅 ionicframework.com/docs/api/provider/$ionicConfigProvider。

【解决方案2】：

尝试在您的 ion-nav-bar 中添加 align-title="center" 属性

<ion-nav-bar class="bar-positive" align-title="center">
    <ion-nav-back-button>
    </ion-nav-back-button>
</ion-nav-bar>

【讨论】：

我认为实现这一点的正确方法是使用 $ionConfig 全局覆盖行为，而是在特殊情况下使用该方法。这样您就不必在每个视图上都使用 align-title 并且可以将其抽象出来。
我试过这个，但无法让它工作。请帮忙。
@32teeths 尝试下面的答案，我认为这是正确的方法。

【解决方案3】：

我认为这是一个更好的图像解决方案。将其添加到 app.scss

.back-button {
    z-index: 100;
}
ion-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

【讨论】：

【解决方案4】：

我为 Ionic 2.0.x

编写了一个修复程序

将以下样式添加到您的 .scss 文件中（我将其放在 app.scss 中）

//  Centering title
// --------------------------------------------------
// a fix for centering the title on all the platforms

ion-header {
  .button-md {
    box-shadow: none;
  }

  .toolbar-title {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
}

然后将以下标记添加到您的页面

<ion-header>
  <!-- use ion-toolbar for a normal toolbar and ion-navbar for navigation -->
  <ion-toolbar>
    <ion-buttons left>
      <!-- left aligned content here -->
    </ion-buttons>

    <ion-title>
      Your title or image
    </ion-title>

    <ion-buttons right>
      <!-- left aligned content here -->
    </ion-buttons>
  </ion-toolbar>
</ion-header>

【讨论】：

不幸的是，长标题在小屏幕（手机）上左右两边都被截断了。

【解决方案5】：

如上述答案中所述，您可以简单地使用$ionicConfigProvider.navBar.alignTitle('center'); 并覆盖所有视图标题的居中行为。或者，如果您需要更改视图标题在其他视图上的位置，那么您可以简单地在标题周围使用center HTML 标签。你可以在这里看到演示Ionic Title

【讨论】：

不错。对我来说，这个答案有效，而接受的答案无效。

【解决方案6】：

<ion-view>
<ion-nav-title class="title">Login
</ion-nav-title>
<ion-content>

</ion-content>

【讨论】：

你应该在你的答案中添加一些上下文。

【解决方案7】：

<ion-header >
	<div align="center">
		<ion-navbar>
   		<ion-title primary>Tittle</ion-title>
  	</ion-navbar>
	</div>
</ion-header>

【讨论】：

【解决方案8】：

嗨，我改变了 css 并像这样重新定义 css

.bar.bar-header .button+.title {
text-align: center !important;
left: 35px;
line-height: 46px;
}

它对我有用。

【讨论】：

【解决方案9】：

我尝试了此处列出的许多解决方案，但在原生 Android 版本中仍然存在以下 2 个问题：

标题文本要么从屏幕左侧移开，要么根本不显示
标题文本不在导航栏中垂直居中

以下 CSS 为我解决了这两个问题：

.platform-android .bar .title {
    line-height: 52px !important;  // vertically centers title on native Android builds
}

.bar .title {
    position: absolute;
    left: 0px !important;
    right: 0px !important;
    width: 100%;
    text-align: center !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

【讨论】：