4

ロゴをイオン バーの中央に配置したいと考えています。どうすればいいのですか ？(常に左側に表示) こんな風にしたい

中央のロゴ画面

ここに私のイオンコードがあります:

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

3 に答える 3

7

あなたのイオンバージョンはわかりませんが、作成したようにion-nav-buttonでオーバーライドせずにion-nav-titleを追加できるようになりました。それはよりきれいで、よりよく機能します。さらに、タイトルが中央にあることを確認するには、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

于 2015-10-14T09:55:15.330 に答える
0 
<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>
于 2016-05-19T13:40:10.400 に答える