CODEWITHSUNDEEP
ionic4
Pardeep
Pardeep

Reputation: 161

Ionic 3 ion-title cannot align center

I use Ionic 3, below the code cannot align the title to center, it moves a little bit right due to the ion-buttons. How can it be solved?

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-button (click)="close()">
        <ion-icon name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title text-center>{{bookName}}</ion-title>
</ion-toolbar>
</ion-header>

Upvotes: 6

Views: 7312

Answers (12)

Sunday Etom
Sunday Etom

Reputation: 341

for ionic 5x this seems to work

<div style="margin-left: auto;margin-right: auto;" classs="ion-text-center">
    <ion-title>Testimonials</ion-title>
  </div>

Upvotes: 0

Alfaz Jikani
Alfaz Jikani

Reputation: 325

Accepted answer doesn't align title on center position in perfect manner. I have added custom CSS to achieve this.

Ex.

<ion-header>
  <ion-toolbar color="primary">
    <ion-title class="header-title">Payment Detail</ion-title>
    <ion-buttons slot="secondary">
      <ion-button>
        <ion-icon name="log-out" class="logout-icon" (click)="logout()"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

.header-title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 150px;
    text-align: center;
}

Upvotes: 0

Rajeshwar
Rajeshwar

Reputation: 2529

The below solution worked for me. Even if there is a button on one side, it will still work.

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

enter image description here

Upvotes: 1

Naveen Kumar V
Naveen Kumar V

Reputation: 2829

Instead of tweaking styles and element attributes, you can simply set the ionic config to set the title centered across all platforms.

IonicModule.forRoot(MyApp, {
  backButtonText: 'Back',
  backButtonIcon: 'ios-arrow-back',
  mode: 'ios', // THIS CONFIG CENTERS THE TITLE ACROSS ALL PLATFORMS
  iconMode: 'md',
  modalEnter: 'modal-slide-in',
  modalLeave: 'modal-slide-out',
  tabsPlacement: 'bottom',
  pageTransition: 'ios-transition',
  swipeBackEnabled: true
}),

Upvotes: 0

Manoj Alwis
Manoj Alwis

Reputation: 1426

Try this align="center"

<ion-header>
 <ion-toolbar>
 <ion-title align="center">Register</ion-title>
  </ion-toolbar>
</ion-header>

Upvotes: 0

Shailesh Bhardwaj
Shailesh Bhardwaj

Reputation: 179

Set text align center and indent it by -45px to adjust back button space

.header .toolbar-title{
    text-align: center;
    text-indent: -45px;
}

Upvotes: 0

Jain Bhavesh
Jain Bhavesh

Reputation: 578

just add mode=ios at title like this 

<ion-title mode=ios>Your Title</ion-title>

Tested in ionic 3, 4 and 5 both

Upvotes: 5

treecon
treecon

Reputation: 2835

For Ionic 4:

In your ion-title component,

  • Add class="ion-text-center" to center-align it. This will also produce the problematic offset to the right, due to button.

  • Add style="margin-left: -52px;" (calculate the problematic offset you want to equalize, in my case it was 52px).

.

<ion-toolbar> 
     <ion-buttons slot="start"> 
<ion-menu-button></ion-menu-button> 
</ion-buttons> 
     <ion-title class="ion-text-center" style="margin-left: -52px;"> 
         My App 
     </ion-title> 
 </ion-toolbar>

Upvotes: 0

Yuvraj Patil
Yuvraj Patil

Reputation: 8774

Use class ion-text-center like below:

<IonTitle class="ion-text-center">Game</IonTitle>

Upvotes: 0

Rob
Rob

Reputation: 2333

You could try to wrap your title in a div like this:

<div text-center>
    <ion-title>YOUR TITLE</ion-title>
</div>

Upvotes: 1

Franco Coronel
Franco Coronel

Reputation: 730

An easy way is to do it with css you can put this class 

page-name {
     ion-title {
         position: “relative”;
         left: 5px  —- here what you desire 
      }
}

Upvotes: 0

Juan Lozoya
Juan Lozoya

Reputation: 209

This is not ionic v3, the components that you are using are ionic v4, anyway, you can try it this way:

<ion-header>
  <ion-toolbar color="primary" text-center>
    <ion-buttons slot="start">
      <ion-button (click)="close()"><ion-icon name="arrow-back"></ion-icon></ion-button>
    </ion-buttons>
    <ion-title>{{bookName}}</ion-title>
  </ion-toolbar>
</ion-header>

Upvotes: 0

Related Questions