2017-03-13 7 views
0

ツールバーの中央にボタンを置く必要があり、左にメニューがあります。ここに私のコードは次のとおりです。これによりツールバーの中心にボタンを配置する2

<ion-toolbar> 
<button ion-button icon-only menuToggle> 
    <ion-icon name="menu"></ion-icon> 
</button> 

<ion-buttons end> 
    <button ion-button icon-only class="button-navbar"> 
    <ion-icon name="ios-refresh"></ion-icon> 
    </button> 
    <button ion-button icon-only class="button-navbar button-right"> 
     <ion-icon name="ios-cart-outline"></ion-icon> 
    </button> 

</ion-buttons> 
</ion-toolbar> 

私は私のtogglemenu、右側の2つのアイコンを持って、私はツールバーの中央に1を希望:

enter image description here

は、事前にありがとう!

答えて

1

私はイオンtitle属性を使用して、それを管理する:

CSSで
<ion-header> 
    <ion-toolbar> 
    <button ion-button icon-only menuToggle class="pink"> 
     <ion-icon name="menu"></ion-icon> 
    </button> 

    <ion-title> 
     <button ion-button icon-only class="button-navbar pink" id="nobackground"> 
     <ion-icon name="ios-refresh"></ion-icon> 
     </button> 
    </ion-title> 

    <ion-buttons end> 
     <button ion-button icon-only class="button-navbar pink"> 
      <ion-icon name="ios-cart"></ion-icon> 
     </button> 
    </ion-buttons> 
    </ion-toolbar> 
</ion-header> 

とセンター:

ion-title { 
    text-align: center; 
} 

.pink { 
    color: #F63566; 
    margin: auto; 
} 

は、アイコンの上に余白の自動を置くことを忘れないでください:)

関連する問題