Как разместить логотип в ионном баре

Question

Я хочу центрировать мой логотип в ионном баре. как мне это сделать ? (Он всегда показывает на левой стороне) я хочу, как этот

Вот мой Ионный код:

<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

Я не знаю вашу ионную версию, но теперь вы можете добавьте название ion-nav-title без переопределения с помощью кнопки ion-nav-like, как вы сделали. Он чище и работает лучше. Кроме того, чтобы удостовериться, что ваш заголовок находится в центре, вы можете добавить «align-title: center» в определении вашего ионного навигатора. Вот пример:

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

Здесь у вас есть codepen ссылка: 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>