title: Center text in navbar with image in Ionic framework
body: <p>I would like to have my text in the middle of an image inside a navbar. I have this code but the text aligns horizontally with the circle image. Your help is greatly appreciated.</p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-navbar&gt;
      &lt;div *ngIf="showHeaderInfo"&gt;
        &lt;ion-title&gt;
          &lt;div style="background-color: #4989ff; color: whitesmoke;" &gt;
            &lt;img class="circle-pic-header" style="margin-top: 5px; margin-left: 5px;" src="{{userInfo?.image}}" /&gt;
              {{ userInfo?.firstName }} {{ userInfo?.lastName }}
          &lt;/div&gt;
        &lt;/ion-title&gt;
      &lt;/div&gt;
      &lt;ion-buttons end&gt;
        &lt;button ion-button icon-only (click)="logOutHandler()"&gt;
          &lt;ion-icon name="log-out"&gt;&lt;/ion-icon&gt;
        &lt;/button&gt;
      &lt;/ion-buttons&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/LurM2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LurM2.png" alt="enter image description here"></a></p>