css - 导航栏中的中心文本与 Ionic 框架中的图像

Question

我希望我的文本位于导航栏内图像的中间。我有这段代码，但文本与圆形图像水平对齐。非常感谢您的帮助。

<ion-header>
  <ion-navbar>
    <div *ngIf="showHeaderInfo">
      <ion-title>
        <div style="background-color: #4989ff; color: whitesmoke;" >
          <img class="circle-pic-header" style="margin-top: 5px; margin-left: 5px;" src="{{userInfo?.image}}" />
            {{ userInfo?.firstName }} {{ userInfo?.lastName }}
        </div>
      </ion-title>
    </div>
    <ion-buttons end>
      <button ion-button icon-only (click)="logOutHandler()">
        <ion-icon name="log-out"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

Answer 1

您可以在图像上添加 CSS 属性以像这样在中心垂直对齐文本

确保图像元素上没有显示: block

.circle-pic-header{vertical-align:middle}

You can find JSFiddle demo here