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>

Answer 1

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