离子3离子标题无法对齐中心

Question

我使用的是Ionic 3，下面的代码无法使标题居中对齐，由于离子按钮的作用，它向右移动了一点。怎么解决？

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-button (click)="close()"><ion-icon name="arrow-back"></ion-icon></ion-button>
    </ion-buttons>
    <ion-title text-center>{{bookName}}</ion-title>
  </ion-toolbar>
</ion-header>

Answer 1

只需在此标题上添加mode = ios

if (checkHistory.length >= 1) {
     console.log('you cannot send any more request')
}

经过离子3、4和5的测试

Answer 2

这不是ionic v3，无论如何，您正在使用的组件是ionic v4，您可以按以下方式尝试：

<ion-header>
  <ion-toolbar color="primary" text-center>
    <ion-buttons slot="start">
      <ion-button (click)="close()"><ion-icon name="arrow-back"></ion-icon></ion-button>
    </ion-buttons>
    <ion-title>{{bookName}}</ion-title>
  </ion-toolbar>
</ion-header>

Answer 3

一种简单的方法是使用CSS来实现，您可以放置​​此类

page-name {
     ion-title {
         position: “relative”;
         left: 5px  —- here what you desire 
      }
}

Answer 4

您可以尝试将标题包裹在这样的div中：

<div text-center>
    <ion-title>YOUR TITLE</ion-title>
</div>

Answer 5

使用类ion-text-center如下：

<IonTitle class="ion-text-center">Game</IonTitle>

Answer 6

对于Ionic 4：

在您的ion-title组件中，

• 添加class="ion-text-center"以使其居中对齐。由于按钮，这也会在右侧产生有问题的偏移。

• 添加style="margin-left: -52px;"（计算您要均衡的有问题的偏移量，在我的情况下为 52px ）。

。

<ion-toolbar> 
     <ion-buttons slot="start"> 
<ion-menu-button></ion-menu-button> 
</ion-buttons> 
     <ion-title class="ion-text-center" style="margin-left: -52px;"> 
         My App 
     </ion-title> 
 </ion-toolbar>

Answer 7

尝试使用align =“ center”

<ion-header>
 <ion-toolbar>
 <ion-title align="center">Register</ion-title>
  </ion-toolbar>
</ion-header>

Answer 8

您无需设置样式和元素属性，只需设置 ionic配置即可将标题设置为跨所有平台居中。

IonicModule.forRoot(MyApp, {
  backButtonText: 'Back',
  backButtonIcon: 'ios-arrow-back',
  mode: 'ios', // THIS CONFIG CENTERS THE TITLE ACROSS ALL PLATFORMS
  iconMode: 'md',
  modalEnter: 'modal-slide-in',
  modalLeave: 'modal-slide-out',
  tabsPlacement: 'bottom',
  pageTransition: 'ios-transition',
  swipeBackEnabled: true
}),

Answer 9

以下解决方案对我有用。即使一侧有一个按钮，它仍然可以工作。

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

Answer 10

接受的答案没有以完美的方式在中心位置对齐标题。我添加了自定义 CSS 来实现这一点。

例如

<ion-header>
  <ion-toolbar color="primary">
    <ion-title class="header-title">Payment Detail</ion-title>
    <ion-buttons slot="secondary">
      <ion-button>
        <ion-icon name="log-out" class="logout-icon" (click)="logout()"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

.header-title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 150px;
    text-align: center;
}