Left align ionic-title in the navbar?

Ionic Framework ionic-v3
1

I’ve been searching for hours but can’t seem to find (or make) a way to do this. My header is:

<ion-header>
  <ion-navbar>
    <ion-title><h1><strong>Aftercare Inbox</strong></h1></ion-title>
  </ion-navbar>
</ion-header>

It is center-aligned by default, and I’ve tried playing with align-title, padding, margins, anything I can think of, but nothing seems to move it. Any ideas?

2

image

without any changes on a clean project, it aligned to left.

3

For Material Design, the title will align left by default. If you set your default platform to iOS, you get a centered title. One way to override this is to add in a text modification directive:

so if you want left align regardless of the platform:

<ion-title text-left>
      Ionic Blank
</ion-title>
4

Also, no need to add the <h1> or <strong> tags. Set the CSS of the <ion-title> in the scss file.

5

That doesn’t seem to be doing anything – I removed the h1 and strong tags, and all other styling on the header/nav, but the title is still centered on iOS. Any ideas why?

6

Well it does center it, just there is some padding that exists to save room for any icons you might have. You have to look carefully to spot it. :slight_smile:

One option would be to set the mode value on the toolbar like:

<ion-header>
  <ion-toolbar mode="md">
    <ion-title >
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

or change the padding values on the <ion-title> in the scss file:

ion-title{
    -webkit-padding-start: 0;
    padding-inline-start: 0;
}

but if you have any icons that might get messy.

1 Like
7

Try this

<ion-title style=“text-align: left !important”><h1><strong>Aftercare Inbox</strong></h1></ion-title>

8

put this in yout global.scss or .scss of a specific page that you want the title to be left or centered:

for me I wanted it to be centered but without the default padding added by ionic so it can show the whole title. you can align it left and add padding to padding-inline-start instead of 0

.ios {
  ion-header {
    ion-title {
      padding-inline-start: 0;
      padding-inline-end: 0;
      text-align: center;
  
    }
  }
}

Good luck!

1 Like