ionic - 如何在离子栏中将徽标居中

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

我不知道您的 ionic 版本，但现在您可以添加 ion-nav-title 而无需像您所做的那样使用 ion-nav-button 进行覆盖。它更干净，效果更好。此外，为了确保您的标题位于中心，您可以在 ion-nav-bar 定义中添加“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>

Answer 3

可以通过在ion-title中使用class="ion-text-center"来完成。

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