ionic2：标头标题未对齐中心

Question

我正在尝试将菜单切换图标向左对齐，标题向标题中心对齐。我正在使用以下代码：

<ion-header>
  <ion-toolbar color="primary">
     <button ion-button menuToggle left>
      <ion-icon name="menu"></ion-icon> 
     </button> 
     <ion-title>
      Home
     </ion-title> 
 </ion-toolbar>

但是标题没有出现在中间。请帮忙。提前致谢。

Answer 1

对于 Android 设备，您需要输入此代码

使用这段代码为我解决了这个问题。

page.html 执行此操作

<ion-header no-border-bottom>

  <ion-navbar color="primary" class="home-nav">
      <ion-title >Dashboard</ion-title>
      <button ion-button menuToggle  >
          <ion-icon name="menu"></ion-icon>
        </button>   
  </ion-navbar>
</ion-header>

app.scss 文件执行此操作

ion-header button, .back-button {
  position: absolute !important;
  z-index: 5;
}


ion-title {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 90px 1px;
  width: 100%;
  height: 100%;
  text-align: center;
}

Answer 2

您需要在 中设置按钮ion-buttons start。

尝试：

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons start><!-- here -->
     <button ion-button menuToggle left>
      <ion-icon name="menu"></ion-icon> 
     </button> 
     </ion-buttons>
     <ion-title>
      Home
     </ion-title> 
 </ion-toolbar>

工具栏文档