Ионный навигатор: название не сосредоточено на устройстве Android

Im очень новый для 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>

Когда я тестирую все в моем браузере Chrome на моем компьютере, все выглядит так, как должно. Заголовок центрирован.

Когда я тестирую его на своем устройстве Android (которое также должно использовать хром Google, как я знаю), я получаю следующий результат:

enter image description here

Как вы можете видеть, Заголовок не центрирован. Как я могу это исправить? К сожалению, у меня нет другого устройства для тестирования.

Ответы

Ответ 1

Попробуйте добавить атрибут align-title="center" в свой ионный навигатор

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

Ответ 2

По дизайну названия Android выровнены влево. Я считаю, что правильный способ изменить это поведение - использовать $ionicConfigProvider в вашем angular .config методе для вашего основного модуля angular. У этого провайдера есть свойство navBar.alignTitle(значение), где "значение" может быть платформой (по умолчанию), слева, справа или по центру. Это описано в документах здесь

Например

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

myApp.config(function($ionicConfigProvider) {

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

Это, на мой взгляд, правильный способ переопределить это поведение.

Ответ 3

Я написал исправление для 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>

Ответ 4

Как упоминалось в приведенном выше ответе, вы можете просто использовать $ionicConfigProvider.navBar.alignTitle('center'); и переопределить поведение центрирования всех ваших заголовков просмотров. ИЛИ, если вам нужно изменить положение заголовка вашего представления в других представлениях, вы можете просто использовать тег center HTML вокруг заголовка. Вы можете увидеть демо здесь Ионное название

Ответ 5

Я думаю, что это лучшее решение для изображений. Добавьте его в app.scss

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

Ответ 6

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

</ion-content>

Ответ 7

Привет, я изменил css и переопределил css, как этот

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

его работа для меня.

Ответ 8

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