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

我不知道您的离子版本，但现在您可以添加离子导航标题，而无需像您制作的离子导航按钮一样覆盖。它更干净，效果更好。此外，为了确保您的标题位于中心，您可以添加＆＃34; align-title：center＆＃34;在您的离子导航栏定义中。这是一个例子：

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

如何将徽标置于离子栏

3 个答案: