bug: [SOLVED] How to center button in footer bar or header bar

[EricDosReis]

Type: bug

Platform: all

I'm trying to center a button in a footer bar, but I can't. I tried many techniques, but nothing works.

I tried margin auto technique:

    .button {
         display: block;
         float: none;
         margin-left: auto;
         margin-right: auto
     }

I tried position absolute technique:

    .button {
         position: absolute;
         left: 0;
         right: 0
     }

I tried set display flex to footer bar:

    .bar-footer {
         display: flex
    }

    .button {
         align-self: center
     }

Someone can help me?

[EricDosReis]

Okay, I solved my problem creating my own footer bar. Here is the code:

Footer bar code:

<ion-footer-bar class="footer-bar-custom">
    <button class="footer-bar-item item-left user-profile-button button button-clear">
        <img class="user-image rounded" src="../img/user-photo.jpg" alt="User Photo">
    </button>

    <a class="footer-bar-item item-center button button-clear button-icon ion-grid"
        ui-sref="home"
        nav-direction="back"></a>

    <button class="footer-bar-item item-right button button-clear button-icon
        ion-android-more-vertical"
        ng-click="popover.show($event)">
    </button>
</ion-footer-bar>

Footer bar CSS custom settings:

/**
 * ion-footer-bar custom styles
 */
.footer-bar-custom {
    background: #455D87;
    color: #F6F7F0;
    height: 44px;
    width: 100%;
    position: absolute;
    bottom: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 5
}

    .footer-bar-custom .item-left,
    .footer-bar-custom .item-center,
    .footer-bar-custom .item-right {
        position: absolute;
        width: 30px
    }

    .footer-bar-custom .item-left { left: 10px }

    .footer-bar-custom .item-center {
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }

    .footer-bar-custom .item-right { right: 10px }

Ionic custom CSS settings:

a.button .icon:before,
a.button.icon:before,
a.button.icon-left:before,
a.button.icon-right:before { margin-top: 0 }

This is the result:

Thank for building Ionic guys!