Question

我正在尝试使用导航栏和子标题创建一个离子头。我正在使用下面的代码。我的问题是我无法将徽标图像/文本“verticaly”与子标题对齐。即使有后退按钮，我也希望标题始终居中。

<ion-header>
 <ion-navbar>
  <button ion-button menuToggle end>
   <ion-icon name="menu" color=primary></ion-icon>
   </button>
  <ion-title><img src="assets/img/logo.png"></ion-title>
 </ion-navbar>
 <ion-toolbar>
  <ion-title> {{ 'TITLE' | translate }}</ion-title>
 </ion-toolbar>
</ion-header>

Answer 1

<ion-navbar>
  <ion-title>Header</ion-title>
  <p class="sub-header">Description</p>
</ion-navbar>

在scss / css。

中

ion-navbar {
    height: 60px;

    p.sub-header{
        left: 0;
        top: 0;
        padding: 0 90px 5px;
        font-size: 1rem;
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        pointer-events: none;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
}

...

如何在Ionic 3中使用副标题居中标题标题

1 个答案:

在scss / css。