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

您只需将text-center指令添加到ion-title或ion-toolbar。

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

Answer 3

对于ios mobile，标题将自动对齐中心所有你必须做的是android

    <ion-header>

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

在你的CSS中执行此操作

ion-title{
 text-align: center;
}

如果未应用上述Sass，请尝试此

ion-title.title.title-md {
    text-align: center;
   }

Answer 4

通过从内容流中取出按钮可以轻松解决问题：将其位置设置为绝对值，将标题保留为其父级正常流程中的唯一子项。它将占据整个宽度并正确居中。

类似的东西：

ion-navbar button {
    position: absolute !important;
}

Answer 5

您应该在离子按钮中使用向左或向右，因为开始和结束并不总是有效

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

Answer 6

您可以使用CSS将文本居中，请尝试以下操作 html代码

<ion-title text-center class="comman-title-text-right">Signup</ion-title>

添加CSS

.comman-title-text-right{
    margin-right: 60px;

}

ionic2：标题标题不对齐中心

6 个答案: