Centralize span below avatar image

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-content padding>
    Content here...

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

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