导航栏中的中心文本与离子框架中的图像

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属性，以便像这样垂直对齐中心的文本

确保图像元素上没有显示：阻止

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

You can find JSFiddle demo here