CODEWITHSUNDEEP
cssionic-frameworkionic2
foufrix
foufrix

Reputation: 1466

Place button to the center oh the toolbar ionic 2

I need to put a button in the center of my toolbar, and i have a menutoggle to the left. Here is my code : 

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

With this i have my togglemenu and the two icons on the right, i would like one in the middle of the toolbar :

enter image description here

Thank you in advance !

Upvotes: 0

Views: 5721

Answers (1)

foufrix
foufrix

Reputation: 1466

I manage it by using the ion-title attribute :

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

and center in the CSS :

ion-title {
    text-align: center;
}

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

don't forget to put margin auto on the icon :)

Upvotes: 3

Related Questions