如何将徽标置于离子棒中心

问题描述：

我想将徽标置于离子棒中。我该怎么做？（它总是显示在左侧）我希望它这样如何将徽标置于离子棒中心

这里是我的代码离子：

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

请尝试在terminal.Then离子服务--lab你可以看到区别？ – Muhsin

答

我不知道你离子版本，但现在你可以添加一个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

它不工作:( – Sajith

你确定你没有改变你的代码@Sajith的行为的css风格吗？我确定这段代码的工作原理是因为我测试了很多时间我们如果我们不能详细介绍你的代码，那么你无法帮助你更多。你能否在http://codepen.io/或类似的东西中重现你的问题？ –

它可以正确处理文本值，但不能工作形象 – Sajith

答

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

如何将徽标置于离子棒中心

相关推荐