Center span element under an image element (Ionic2)
<p>How to centralize this span under the avatar using flex?</p>

<p><a href="https://i.stack.imgur.com/Ozvoi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ozvoi.png" alt="enter image description here"></a></p>

<p>The avatar image is well centralized if I remove the span, but when I insert the span, even with <code>display:block</code> it displays on the right side.</p>

<p>Here is my <strong>HTML</strong>:</p>

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

<p>That is my <strong>SCSS</strong>:</p>

<pre><code>.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);
    }
}
</code></pre>