title: Center span element under an image element (Ionic2)
body: <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>