How to center buttons in ion-footer-bar?


There is a method for center buttons in the footer bar?


I also wonder about this. I even want to add button icon as possible.


A quick and easy way to position items on the footer would be to use grid columns -


I think the best way to arrange the buttons on the footer is using a grid, but it will not look so fine. I just made a css snippet and now it looks good:


     padding: 0px;
.bar-footer.footer-buttons .row{
     padding: 0px;
.bar-footer.footer-buttons .row .col{
     text-align: center;


<div class="bar bar-footer bar-light footer-buttons">
    <div class="row">
        <div class="col">
            <button class="button button-balanced button-clear icon-left ion-ios-checkmark-empty" ng-click="save()">Save</button>	
        <div class="col">
            <button class="button button-balanced button-clear icon-left ion-ios-close-empty" ng-click="add()">Cancel</button>	



I know this post is pretty old but I am just starting with ionic and came across the same issue.

One solution I found was simply taken from another issue: Vertically center a button


        <ion-footer-bar class="bar-stable button-footer-bar">
          <a class="button button-stable">Filtern</a>


.button-footer-bar {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;

Can someone say if there are any plattforms where this may not be working?


My workaround for this. wrap the <ion-buttons ></ion-buttons> with a div and style it with ‘text-align:center’

  <ion-toolbar color="primary">
  <div style="text-align: center;">
    <ion-buttons >
      <button ion-button icon-left (click)="presentActionSheet()">
        <ion-icon name="camera"></ion-icon>Select Image
      <button ion-button icon-left (click)="uploadImage()" [disabled]="lastImage === null">
        <ion-icon name="cloud-upload"></ion-icon>Upload

something like this. works for me everytime