How to center a logo in an ionic rod

Question

I want to focus my logo on the ion bar. How can I do it? (He always shows on the left side) I want it as if

Here is my ion 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 an ionic navigation title without having to override it using the ionic navigation button, as you did. It is cleaner and works better. Alternatively, to make sure your title is centered, you can add "align-title: center" in the definition of your ion navigator. Here is an 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

Answer 2

<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>