Centralize span below avatar image


#1

How to centralize this span under the avatar using flex?

The avatar image is well centralized if I remove the span, but when I insert the span, even with display:blockit displays on the right side.

Here is my HTML:

<ion-navbar *navbar>
    <ion-avatar item-center>
        <img src="img/bill-gates-avatar.jpg">
        <span>Bill Gates</span>
    </ion-avatar>
</ion-navbar>
<ion-content padding>
    Content here...
</ion-content>

Here is my SCSS:

.tabs {

    ion-navbar-section {
        min-height: 16.6rem;
    }

    .toolbar {
        min-height: 170px;
    }

    ion-avatar {
        display: flex;
        justify-content: center;
        align-content: center;
    }

    ion-avatar img {
        max-width: 8rem;
        max-height: 8rem;
        border-radius: 5rem;
        border: 2px solid color($colors, light);
    }
}

#2

This was fixed here: http://stackoverflow.com/questions/37923079/center-span-element-under-an-image-element-ionic2/37923215#37923215