Ionic框架：如何让导航栏内图片中的文字居中？

我明白你想让导航栏内的文字和圆形图片垂直居中对齐，目前文字仅和图片水平排列但没达到预期的垂直居中效果。咱们可以借助CSS Flexbox布局来快速解决这个问题，只需要调整包裹图片和文字的容器样式即可：

修改后的代码示例 #

<ion-header>
  <ion-navbar>
    <div *ngIf="showHeaderInfo">
      <ion-title>
        <div style="background-color: #4989ff; color: whitesmoke; display: flex; align-items: center;">
          <img class="circle-pic-header" style="margin-left: 5px; margin-right: 8px;" src="{{userInfo?.image}}" />
          {{ userInfo?.firstName }} {{ userInfo?.lastName }}
        </div>
      </ion-title>
    </div>
  </ion-navbar>
</ion-header>

关键修改说明 #

• 给包裹图片和文字的div添加了display: flex：将容器转为弹性布局，让内部元素能灵活调整排列方式
• 添加align-items: center：这是实现垂直居中的核心属性，会让容器内的子元素（图片、文字）自动在垂直方向上居中对齐
• 去掉了图片的margin-top: 5px：因为Flexbox已经帮我们实现了垂直居中，无需再手动用margin调整位置；如果需要图片和文字之间的水平间距，可以给图片加margin-right来控制

如果你的圆形图片有固定高度，这个方法依然适用，Flexbox会自动适配不同高度的元素，稳定保持垂直居中的效果。

内容的提问来源于stack exchange，提问作者stack questions