CODEWITHSUNDEEP
cssangularionic-frameworkionic3
Milind
Milind

Reputation: 1955

Ionic 3 side menu title center

I have created ionic project from cli. Ionic version is 3. I am trying to make title image in center. Somebody please help me 

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar color='primary'>
      <ion-title>
        <img src="assets/imgs/logo.png" width="128" />
      </ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Upvotes: 1

Views: 3127

Answers (2)

umefarooq
umefarooq

Reputation: 4574

you can use ionic CSS utilities to align center

<ion-title text-center>
    <img src="assets/imgs/logo.png" width="128" />
</ion-title>

Read More about css utilities

https://ionicframework.com/docs/theming/css-utilities/

Upvotes: 5

maninak
maninak

Reputation: 2726

When you want to center an element, add the text-align: center property to its parent element.

In your case, you need to change the code to:

  <ion-title style="text-align: center">
    <img src="assets/imgs/logo.png" width="128" />
  </ion-title>

Upvotes: 1

Related Questions