Ionic Nav-bar: Titel ist nicht auf Android-Gerät zentriert

Ich bin sehr neu zu Ionic, aber ich mag es schon. Ich wollte die nav-bar verwenden, so implementiert ich die folgende index.html:Ionic Nav-bar: Titel ist nicht auf Android-Gerät zentriert

<!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>

In meinem app.js i konfigurieren, dass die Wegfindung:

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("/"); 
});

Und ein Beispiel Seite:

<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>

Wenn ich alles in meinem Google Chrome-Browser auf meinem PC teste, sieht alles so aus, als müsste es. Der Titel ist zentriert.

Wenn ich jetzt auf meinem Android-Gerät testen (die auch Google Chrome verwenden sollten, wie ich weiß), erhalte ich das folgende Ergebnis:

enter image description here

Wie Sie den Titel zentriert ist nicht zu sehen. Wie kann ich das beheben? Leider habe ich kein anderes Gerät, um es zu testen.

Quelle

2015-05-02 Mulgard

es ist kein Fehler app.scss, in android wesentlichen Titel align links – saygon91

Versuchen Sie das align-title="center" Attribut in Ihrem Ion-nav-Bar

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

Quelle

2015-05-03 10:45:42 Gisonrg

Ich denke, der richtige Weg, dies zu erreichen, ist durch die $ ionConfig mit Überschreibung global das Verhalten und verwenden stattdessen den Ansatz auf einer speziellen Fallbasis. Auf diese Weise müssen Sie den align-title nicht in jeder Ansicht verwenden und können sie abstrahieren. –

Ich habe das versucht, aber ich konnte es nicht zur Arbeit bringen. Bitte Hilfe. – 32teeths

@ 32 Zähne versuchen Sie die Antwort unten, die ich denke, ist der richtige Weg. –

Durch Design Android Titel ausgerichtet sind, auf der linken Seite hinzufügen. Ich glaube, die richtige Methode, dieses Verhalten zu ändern, ist die Verwendung des $ ionicConfigProvider in Ihrer eckigen .config Methode für Ihr Haupt-Winkelmodul. Dieser Anbieter verfügt über eine Eigenschaft navBar.alignTitle (Wert) wobei "Wert" Plattform (Standard), links, rechts oder zentriert sein kann. Dies wird in der docs beschrieben here

Zum Beispiel

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

myApp.config(function($ionicConfigProvider) { 

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

Dies ist meiner Meinung nach der richtige Weg, um dieses Verhalten zu überschreiben.

Quelle

2015-05-04 01:36:16

Das ist der richtige Weg! Es sollte die akzeptierte Antwort IMO sein. – keldar

Sie können jetzt etwas wie $ ionicConfigProvider.platfrom.android.navBar.alignTitle ('center'); um nur android oder $ ionicConfigProvider.platfrom.ios.navBar.alignTitle ('center') zu tarnen; nur für iOS. Dies funktioniert auch für alle Konfigurationen. Eine vollständige Liste finden Sie unter http://ionicframework.com/docs/api/provider/$ionicConfigProvider/. –

Diese Antwort sollte akzeptiert werden –

Hallo ich bin CSS geändert und die CSS wie diese für mich

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

seine Arbeit neu zu definieren.

Quelle

2016-01-15 08:34:39

Wie in der obigen Antwort erwähnt, können Sie einfach verwenden und das Zentrierungsverhalten aller Ihrer Ansichtstitel außer Kraft setzen. ODER, wenn Sie die Position Ihres Ansichtstitel in anderen Ansichten ändern müssen, können Sie einfach den HTML-Tag center um den Titel verwenden. Sie können die Demo hier Ionic Title

Quelle

2016-03-12 18:07:13 SATISH

Nizza. Für mich funktioniert diese Antwort, während die akzeptierte nicht ist. – henggana

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

</ion-content>

Quelle

2016-06-24 11:02:58 user3736397

sollten Sie Ihrer Antwort einen Kontext hinzufügen. – MLavoie

Ich sehe ein Update für Ionic 2.0.x

die folgende Art Ihrem .scss Datei hinzufügen schrieb (ich legte es in 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; 
    } 
}

Danach fügen Sie das folgende Markup zu Ihrer Seite

<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>

Quelle

2017-02-17 13:49:44 0x1ad2

Ja, es funktionierte für ionic 2. – Biranchi

Ich denke, dass dies eine bessere Lösung für Bilder. In es

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

Quelle

2017-04-27 07:03:13 kabus

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

Quelle

2017-11-01 01:10:04

Erwägen Sie, Ihrem Code eine Erklärung hinzuzufügen. –

Ionic Nav-bar: Titel ist nicht auf Android-Gerät zentriert

Antwort

Verwandte Themen