ionic-framework - ionicframework - ionicons
Barra de navegación iónica: el título no está centrado en el dispositivo Android (9)
Como se menciona en la respuesta anterior, simplemente puede usar $ionicConfigProvider.navBar.alignTitle(''center''); y anula el comportamiento de centrado de todos sus títulos de vista. O bien, si necesita cambiar la posición del título de su vista en otras vistas, simplemente puede utilizar la etiqueta HTML del center alrededor del título. Puedes ver la demostración aquí Título iónico
Soy muy nuevo en Ionic pero ya me gusta. Quería usar la nav-bar así que implementé el siguiente 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>
En mi app.js configuro la ruta:
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("/");
});
Y una página de ejemplo:
<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>
Cuando pruebo todo en mi navegador google chrome en mi pc todo parece que debería. El título está centrado.
Cuando ahora lo pruebo en mi dispositivo Android (que también debería usar Google Chrome, como sé), obtengo el siguiente resultado:
Como puede ver, el Título no está centrado. ¿Cómo puedo arreglar eso? Desafortunadamente no tengo otro dispositivo para probarlo.
Creo que esta es una mejor solución para las imágenes. Agrégalo a app.scss
.back-button {
z-index: 100;
}
ion-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
Escribí una solución para Ionic 2.0.x
Agregue el siguiente estilo a su archivo .scss (lo puse en 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;
}
}
Después de eso, agregue el siguiente marcado a su página
<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>
Hola, he cambiado CSS y redefino el CSS como este
.bar.bar-header .button+.title {
text-align: center !important;
left: 35px;
line-height: 46px;
}
es trabajo para mi
Intenté muchas de las soluciones enumeradas aquí y aún tenía los siguientes 2 problemas con las versiones nativas de Android:
- El texto del título se desplaza del lado izquierdo de la pantalla o simplemente no aparece en absoluto
- El texto del título no se centra verticalmente en la barra de navegación
El siguiente CSS resolvió estos dos problemas para mí:
.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;
}
Por diseño, los títulos de Android están alineados a la izquierda. Creo que la forma correcta de cambiar este comportamiento es utilizando $ ionicConfigProvider en su método angular .config para su módulo angular principal. Este proveedor tiene una propiedad navBar.alignTitle (value) donde "value" puede ser platform (predeterminado), left, right o center. Esto se describe en los documentos here
Por ejemplo
var myApp = angular.module(''reallyCoolApp'', [''ionic'']);
myApp.config(function($ionicConfigProvider) {
// note that you can also chain configs
$ionicConfigProvider.navBar.alignTitle(''center'');
});
Esto en mi opinión es la forma correcta de anular este comportamiento.
Pruebe agregar el atributo align-title="center" en su ion-nav-bar
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-header >
<div align="center">
<ion-navbar>
<ion-title primary>Tittle</ion-title>
</ion-navbar>
</div>
</ion-header>
<ion-view>
<ion-nav-title class="title">Login
</ion-nav-title>
<ion-content>
</ion-content>