Ionic v4：将徽标放在 ion-header 的中心

Question

   <ion-header mode="ios">
     <ion-toolbar class="ion-no-padding" mode="ios" color="secondary">
      <ion-buttons mode="md" slot="start">
        <ion-button (click)="toggleMenu()">
         <ion-icon slot="icon-only" src="assets/icon/hamburger.svg"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-title>My Navigation Bar</ion-title>
    </ion-toolbar>
 </ion-header>

这非常适合中间的 Ion 标题。我想在中心添加徽标而不是文本。尝试在 ion-title 中添加 ion-icon 但没有成功。

    <ion-title>
     <ion-icon slot="icon-only" src="assets/icon/logo.svg"></ion-icon>
    </ion-title>

Answer 1

最好将徽标放在 div 中并给它一个 class 名称

.classname {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: transperent;
}

现在一切都应该正常工作，但我想如果你把这个 class 用于 ion-toolbar，即使 ion-button 也会放在中间..

Answer 2

你为什么不使用 ion-text-center 作为 ion-title？

<ion-header>
  <ion-toolbar>
    <ion-title class="ion-text-center">
      <ion-img src="../../assets/img/logo.png"></ion-img>
    </ion-title>
  </ion-toolbar>
</ion-header>

Ionic v4：将徽标放在 ion-header 的中心

Ionic v4: place Logo in center of ion-header

ionic-framework

ionic4