How do I center the logo in ionic bar

Question

I want to center my logo in the ionic bar. how do i do it ? (It always shows at the left side) I want it like this

Here is my Ionic code :

 <ion-nav-bar class="bar bar-header bar-assertive">

        <ion-nav-back-button>
        </ion-nav-back-button>
        <ion-nav-buttons side ="Center">
        <div class="title"> <img alt="Company Logo" height="40" src="img/logo.png"></div>
        </ion-nav-buttons>
        <ion-nav-buttons side="right">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
            </button>
        </ion-nav-buttons>

    </ion-nav-bar>

please try ionic serve --lab in terminal.Then you can see the difference? — Muhsin Keloth, Oct 14 '15 at 07:42

Eve-Amandine · Accepted Answer · 2015-10-15T11:09:33.367

7

I don't know your ionic version but now you can add a ion-nav-title without doing an override with a ion-nav-button like you made. It's cleaner and works better. In addition, to make sure your title is on the center, you can add a "align-title: center" in your ion-nav-bar definition. Here is the example:

<ion-nav-bar class="bar bar-header bar-assertive" align-title="center">  

    <ion-nav-back-button>
    </ion-nav-back-button>

    <ion-nav-title>
        <img alt="Company Logo" height="40" src="img/logo.png">
    </ion-nav-title>

    <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
        </button>
    </ion-nav-buttons>

</ion-nav-bar>

Here you have the codepen link: http://codepen.io/anon/pen/RWLyMW

edited Oct 15 '15 at 11:09

answered Oct 14 '15 at 09:55

Eve-Amandine

230
2
10

Are you sure that you don't have css style that change the behavior of your code @Sajith? I'm sure that this code works because I've tested it a lot of time. We can't help you more if we can't go into details of your code. Can you reproduce your problem in a http://codepen.io/ or something like this please? – Eve-Amandine Oct 14 '15 at 10:43
It is working properly with text values. but not work for image – Sajith Oct 15 '15 at 04:32

score 0 · Answer 2 · answered May 19 '16 at 13:40

<ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>

     <ion-nav-buttons side="right">
         <img src="http://www.ionicframework.com/img/ionic-logo-white.svg" 
        width="123" height="43" menu-toggle="left"/>
     </ion-nav-buttons>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
      </button>
      </ion-nav-buttons>

 </ion-nav-bar>

score 0 · Answer 3 · answered Sep 19 '20 at 10:34

It can be done by using class="ion-text-center" in ion-title.

<ion-header class="ion-no-border">
  <ion-toolbar>
     <ion-button class="header-button" slot="start" fill="clear">
        <ion-icon name="person"></ion-icon>
     </ion-button>
     <ion-title class="ion-text-center">
        <ion-icon
          class="logo-icon"
          src="./assets/icon/logo.svg"
          ></ion-icon>
      </ion-title>
      <ion-button class="header-button" slot="end" fill="clear">
         <ion-icon src="./assets/icon/menu.svg"></ion-icon>
      </ion-button>
   </ion-toolbar>
</ion-header>

How do I center the logo in ionic bar

3 Answers3