Hi all! Lately i’ve been struggling to fix a small problem with the title in my navbar. Basically, the title in my navar are slightly misplaced on the right and not centered, this happens only on Android. Also this happens only when a sidemenu button is present, otherwise the title is centered cor…

See: https://stackoverflow.com/questions/30005284/ionic-nav-bar-title-is-not-centered-on-android-device/42299612 Navbar ion-title align center for android

Have you used Chrome’s dev tools to inspect the DOM and CSS to see what is introducing this? You might have some custom CSS in your design that is being applied to the title.

The main reason is that i have the toggleMenu button on the left side of the navbar. I thought Ionic fixed this automatically when using the “text-center” property in the view. (iOS does indeed). [test2] Before trying to fix the problem with weird workarounds i’d like to know what’s the proper way…

How does it look when you preview all three supported Mobile platforms side by side: ionic serve --lab For example: [image] See: https://github.com/Robinyo/big-top/blob/master/src/pages/events/events.html

It looks okay on ios but slightly offset to the right on android [Capture]

Try it without the text-center attribute.

[image] robinyo: Try it without the text-center attribute. I already tried all kind of similar solutions before opening this thread. Here’s a screenshot without the text-center attribute… [Capture] the title isn’t centered anymore.

[image] robinyo: Try it without the text-center attribute. My point being what’s is the default behaviour on each platform? on iOS the title is centred on Android the title is not centred (its left-ish aligned) on Windows the title is not centred (its left-ish aligned) [47]

<ion-header> <ion-navbar> <button ion-button menuToggle left > <ion-icon name="menu"></ion-icon> </button> <ion-title text-center>{{ titolo }}</ion-title> </ion-navbar> </ion-header> OK, I see what you mean. The ion-title text is being centred within the…

Exactly. Is there an easy fix to have an always-properly centered title on android?

Horizontally align title on Navbar on Android

Ionic Framework ionic-v3

robinyo April 7, 2018, 7:57pm 11

See:

https://stackoverflow.com/questions/30005284/ionic-nav-bar-title-is-not-centered-on-android-device/42299612
Navbar ion-title align center for android

Topic		Replies	Views
Navbar ion-title align center for android ionic-v3	25	89290	November 7, 2018
Center the title on Ionic for Android ionic-v1	7	22180	July 12, 2017
BUG Nav-bar title, neither always center ionic-v1	0	593	March 2, 2017
How to Center Pages Titles? ionic-v1	6	2884	June 30, 2017
Not able to center text in navbar ionic-v3	5	5509	February 1, 2017

Horizontally align title on Navbar on Android

Related topics